2.案例、鼠标时间类型、事件对象参数

案例

注册事件


    <!-- //disabled默认情况用户不能点击 -->
    <input type="button" value="我已阅读用户协议(5)" disabled>
    <script>
        // 分析:
        // 1.修改标签中的文字内容
        // 2.定时器
        // 3.修改标签的disabled属性
        // 4.清除定时器
        // 5.条件判断

        // 结论:以上的知识点都放在定时器中完成

        // 代码实现
        // 1.获取按钮标签
        let btn = document.querySelector('input')
        // 2.定义一个变量保存开始值
        let num = 5;
        // 3.数字要递减,放到定时器中
        let timeId = setInterval(function () {
            // 数字递减
            --num
            // 修改标签中的文字内容
            btn.value = `我已阅读用户协议(${num})`;
            // 6.判断数字是否小于0
            if (num < 0) {
                // 7.修改按钮上的文字
                btn.value = '同意';
                // 8.修改按钮为可点击状态
                btn.disabled = false
                // 9.停止定时器
                clearInterval(timeId);
            }

        }, 1000)

    </script>

在这里插入图片描述

轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .slider {
            width: 450px;
            height: 300px;
        }

        .slider img {
            width: 100%;
        }

        .slider-footer {
            height: 10px;
            width: 450px;
        }

        ul li {
            height: 10px;
            width: 20px;
            /* border-radius: 50%; */
            float: left;
            margin-left: 30px;
            list-style: none;
            background-color: gray;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="slider">
        <div class="slider-wrapper">
            <img src="" alt="">
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
            <div class="toggle"></div>
        </div>
    </div>



    <script>


        //2.初始化数据
        const goodList = [
            {
                img: '../image/1.jpg',
                id: '4001171',
                name: '商品1',
                price: '289.0'
            },
            {
                img: '../image/2.jpg',
                id: '4001172',
                name: '商品2',
                price: '189.0'
            },
            {
                img: '../image/3.jpg',
                id: '4001173',
                name: '商品3',
                price: '89.0'
            },
            {
                img: '../image/4.jpg',
                id: '4001174',
                name: '商品4',
                price: '589.0'
            },
            {
                img: '../image/5.jpg',
                id: '4001175',
                name: '商品5',
                price: '589.0'
            },
            {
                img: '../image/6.jpg',
                id: '4001176',
                name: '商品6',
                price: '29.0'
            },
            {
                img: '../image/7.jpg',
                id: '40011727',
                name: '商品7',
                price: '89.0'
            },
            {

                img: '../image/8.jpg',
                id: '4001178',
                name: '商品8',
                price: '189.0'
            }
        ]

        // 分析:
        // 1.从数组中获取对应的数据(图片路径)   
        // 2.将图片路径设置给对应的图片标签
        // 3.从数组中获取对应的数据(标题)
        // 4.将标题文字设置给对应的p标签
        // 5.将对应的li标签添加一个active类名

        // 代码实现
        // 1.定义变量保存当前从数据中的第几个值开始
        let index = 0
        // 2.获取标签对象
        let img = document.querySelector('img')
        let p = document.querySelector('p')
        // 3.开启定时器
        setInterval(function () {
            //4.在定时器中,我们要从数组中依次取值

            // 5.从数组中取值

            if (index >= goodList.length) { index = 0 }
            let obj = goodList[index]
            index++
            console.log(obj)
            // 6.从当前对象中获取图片路径和图片对应的标题
            let imgSrc = obj.img
            let p_title = obj.name
            // 7.将图片路径设置给img标签将标题设置给p标签

            img.src = imgSrc
            p.innerText = p_title

            // 9-1 先将页面中的active类名移除掉
            document.querySelector('.active').classList.remove('active')

            // 8.获取对应的li标签(当前是第几张图片,选中第几个li标签)
            let li = document.querySelector(`li:nth-child(${index})`)
            console.log(li)
            // 9.给当前的li标签添加active名
            li.classList.add('active')
        }, 3000)





    </script>
</body>

</html>

在这里插入图片描述

事件基本介绍

在网页中事件是用户的一个动作
用来实现用户和网页交互

      事件三要素
       a)事件源:用户的动作作用到那个标签身上,那个标签就是事件源
       b)事件类型:用户使用的是什么动作(点击事件、输入事件、悬停事件)
       c)处理程序:代表事件最后要实现的具体效果,就是一个匿名函数
    <div></div>
    <div></div>
    <script>
        //  绑定事件
        // 1.先获取事件源(DOM标签对象)
        // 2.给事件源绑定事件
        //事件源.addEventListener('事件类型',function(){});
        //备注:事件类型常用的一个点击事件:click
        // 
        // 代码演示
        // 点击div给div设置背景颜色
        let div = document.querySelector('div')
        div.addEventListener('click', function () {
            div.style.backgroundColor = 'pink'
        })


    </script>

在这里插入图片描述

其他方式绑定事件

给元素绑定事件推荐使用addEventListener方式
给元素绑定事件:DOML2写法:addEventListener
DOML0写法:事件源.on事件类型=function(){}
两种注册时间的区别:
a)addEventListener是个方法
b)on的方式本质上是一个属性
c)如果给元素注册多个相同的时间,则addEventListener都可以执行
d)如果给元素注册多个相同的事件,on的方式只能执行一个

    <input type="button" value="按钮">
    <script>

        let btn = document.querySelector('input')
        // DOML2写法:
        // btn.addEventListener('click', function () {
        //     btn.style.color = 'red'
        // })

        // DOML0写法:
        btn.onclick = function () {
            btn.style.color = 'red'
        }

        
    </script>

鼠标事件类型

鼠标触发

click 鼠标点击
mouseenter 鼠标进入
mouseleave 鼠标离开

焦点事件

focus 获得焦点

输入框获得鼠标光标

blur 失去焦点

键盘触发

键盘事件要么给整个页面注册,要么给输入框注册·······

Keydown 键盘按下触发
Keyup 键盘抬起触发

表单输入触发

input 用户输入事件

事件对象参数(只能设置一个)

作用:用来记录当前事件中的一些信息
注意:
a)任何一个事件都有事件对象参数,用就设置事件对象参数,不用就不加
b)键盘事件/鼠标事件===>常常会用到事件对象参数
c)键盘事件参数记录当前用户按下的是哪个按键
d)鼠标事件对象参数最重要的是记录了鼠标的坐标信息

    <input type="text">
    <script>

//键盘事件,鼠标事件类似
        let int = document.querySelector('input');
        int.addEventListener('keydown', function (e) {
            // e是event的缩写,叫事件对象参数
            console.log(e)
        })

    </script>

在这里插入图片描述

鼠标事件总结

事件对象参数.clientX 横坐标,参照页面左上角(参照页面可视区左上角)
事件对象参数.offsetX 横坐标,参照事件源左上角
事件对象参数.pageX 横坐标,参照页面左上角(看看页面中是否有滚动条,pageX包括滚动条滚动的距离)
事件对象参数.screenY 纵坐标,参照整个电脑屏幕左上角

自动点击触发事件

<body>
    <input type="button">
    <script>
// 自动触发事件
// 语法:DOM标签对象.click();

// 要求:点击按钮输出一句话
let btn=document.querySelector('input')
btn.addEventListener('click',function(){
    console.log('hehe')
})
btn.click()
//自动触发点击事件(得首先有事件)
    </script>
</body>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/454850.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

构建部署_Jenkins介绍与安装

构建部署_Jenkins介绍与安装 构建部署_Jenkins介绍与安装Jenkins介绍Jenkins安装 构建部署_Jenkins介绍与安装 Jenkins介绍 Jenkins是一个可扩展的持续集成引擎。 持续集成&#xff0c;就是通常所说的CI&#xff08;Continues Integration&#xff09;&#xff0c;可以说是现…

Ajax(2)

图片上传 传图片文件不能像传文字一样用JSON格式&#xff0c;可以用form-data类型携带文件 1.获取图片文件对象 2.使用FormData&#xff08;浏览器内置的构造函数&#xff09;携带图片文件 3.提交表单数据到服务器&#xff0c;返回图片网址 这里可能用到的事件监听器&#…

[算法] 牛课题霸 - DP6 连续子数组最大和 - 动态规划

文章目录 题目链接解题过程思路一思路二 题目链接 DP6 连续子数组最大和 解题过程 思路一 两个for循环&#xff0c;遍历。 因为每个元素都要遍历两遍&#xff0c;所以时间复杂度O(n^2)。 简单的测试用例可以通过&#xff0c;但是提交时&#xff0c;一个巨大的数组用例&…

Copilot如何将word文稿一键转为PPT

背景 很多小伙伴平时经常会遇到的一个场景是&#xff0c;如何将word文稿图文转为PPT。 这个过程是既复杂而又无趣的。 现在&#xff0c;有了copilot&#xff0c;你可以一键搞定&#xff01; 使用copilot Pro来实现 比如我们想要做一个关于copilot studio的PPT展示&#xf…

Unix环境高级编程-学习-05-TCP/IP协议与套接字

目录 一、概念 二、TCP/IP参考模型 三、客户端和服务端使用TCP通信过程 1、同一以太网下 四、函数介绍 1、socket &#xff08;1&#xff09;声明 &#xff08;2&#xff09;作用 &#xff08;3&#xff09;参数 &#xff08;4&#xff09;返回值 &#xff08;5&…

【Python】新手入门学习:详细介绍单一职责原则(SRP)及其作用、代码示例

【Python】新手入门学习&#xff1a;详细介绍单一职责原则&#xff08;SRP&#xff09;及其作用、代码示例 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyT…

MySQL一些命令记录

查看数据引擎 show engines;创建数据库,并选择库 CREATE DATABASE IF NOT EXISTS test_database; USE test_database;创建表 CREATE TABLE IF NOT EXISTS test_table (id INT AUTO_INCREMENT PRIMARY KEY,field1 VARCHAR(50),field2 VARCHAR(50),field3 VARCHAR(50),field4 …

https超文本传输安全协议到底是什么?

HTTPS&#xff08;全称&#xff1a;Hyper Text Transfer Protocol over Secure Socket Layer&#xff09;是超文本传输安全协议的英文翻译缩写&#xff0c;它是以安全为目标的HTTP通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS在HTTP的基…

基于SSM的协同过滤算法的电影推荐系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的协同过滤算法的电影推荐系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通…

盘点9款AI论文写作神器,轻松写出高质量论文

0. 未来百科 未来百科&#xff0c;是一个全球最大的 AI 产品导航网站 —— 为发现全球优质 AI 工具而生 。目前已 聚集全球 10000优质 AI 工具产品 &#xff0c;旨在帮助用户发现全球最好的 AI 工具&#xff0c;同时为研发 AI 垂直应用的创业公司提供展示窗口&#xff0c;迎接…

如何使用vue定义组件之——父组件调用子组件

首先&#xff0c;我们需要创建两个组件模板template&#xff1a; <template id"father"><div><h3>我是父组件</h3><h3>访问自己的数据:</h3><h3>{{ msg }}</h3></div></template><template id"…

C#多线程(5)——异步方法async与await

在上一章节中&#xff0c;为大家介绍了C#多线程&#xff08;4&#xff09;——任务并行库TPL&#xff0c;TPL是从.NetFramwork4.0后引入的基于异步操作的一组API&#xff0c;核心关注于任务【 T a s k 和 T a s k < T > \textcolor{red}{Task 和 Task<T>} Task和Ta…

HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例

介绍 本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。 效果图预览 使用说明 进入页面&#xff0c;下拉列表触发刷新数据事件&#xff0c;等待数据刷新完成。上滑列表到底部&#xff0c;触发加载更多数据事件&#xff0c;等待数据加载…

基于Springboot的集团门户网站(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的集团门户网站&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

YOLOv5目标检测学习(5):源码解析之:推理部分dectet.py

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、导入相关包与路径、模块配置1.1 导入相关的python包1.2 获取当前文件的相对路径1.3 加载自定义模块1.4 总结 二、执行主体的main函数所以执行推理代码&…

手写简易操作系统(六)--内存分页

前情提要 上一节我们讲到了获取物理内存&#xff0c;这节我们将开启内存分页 一、内存分页的作用 内存分页是一种操作系统和硬件协同工作的机制&#xff0c;用于将物理内存分割成固定大小的页面&#xff08;通常为4KB&#xff09;并将虚拟内存空间映射到这些页面上。内存分页…

Django官网项目 五

Writing your first Django app, part 5 | Django documentation | Django 自动测试介绍 何为自动测试 测试有系统自动完成。你只需要一次性的编写测试代码&#xff0c;当程序代码变更后&#xff0c;不需要对原来的测试人工再重新测试一遍。系统可以自动运行原来编写的测试代…

【unity资源加载与优化章】Profiler优化工具详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

今日AI:GPT-4.5意外曝光可能6月发布、UP主借AI识别情绪播放量186万、全球首个AI程序员诞生

欢迎来到【今日AI】栏目!这里是你每天探索人工智能世界的指南&#xff0c;每天我们为你呈现AI领域的热点内容&#xff0c;聚焦开发者&#xff0c;助你洞悉技术趋势、了解创新AI产品应用。 新鲜AI产品点击了解:AIbase - 智能匹配最适合您的AI产品和网站 &#x1f4e2;一分钟速…

简述类与对象

一、两者关系 类是Java语言中最重要的数据类型&#xff0c;用于创建具体实例&#xff08;对象&#xff09; 抽象出一类事物共有的属性和行为&#xff0c;即数据以及数据上的操作 类是对现实事物的模拟&#xff0c;包含属性&#xff08;成员变量&#xff09;和行为&#xff0…