当前位置： 首页 > news >正文

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

news 2026/4/4 6:38:11

案例

注册事件

<!-- //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.判断数字是否小于0if (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.imglet p_title = obj.name// 7.将图片路径设置给img标签将标题设置给p标签img.src = imgSrcp.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>

在这里插入图片描述

相关文章：

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

案例 注册事件 <!-- //disabled默认情况用户不能点击 --><input type"button" value"我已阅读用户协议(5)" disabled><script>// 分析&#xff1a;// 1.修改标签中的文字内容// 2.定时器// 3.修改标签的disabled属性// 4.清除定时器// …...

编程日记 2024/3/14 10:15:24

OPENCV（0-1之0.0）

OPENCV 第1周&#xff1a;基础知识和安装目标内容 第2-3周&#xff1a;图像处理基础目标内容 第4-5周目标内容 第6-7周目标内容 第8周及以后目标内容 时间安排如下&#xff1a; 第1周&#xff1a;基础知识和安装 目标 了解计算机视觉的基本概念&#xff0c;安装OpenCV&#x…...

编程日记 2024/3/14 10:13:22

easyrecovery破解版百度云（含Mac/Win版）以及EasyRecovery可以恢复哪些设备

软件介绍 当不小心将回收站的文件删除了怎么办&#xff1f;想找回但是不知道怎么找回需要的数据文件&#xff1f;别担心今天小编就为大家介绍一款非常专业的电脑数据文件恢复工具&#xff0c;easyrecovery14是由Ontrack专为电脑用户推出的一款专业的数据恢复软件&…...

编程日记 2024/3/14 10:09:17

[2023年]-hadoop面试真题(一)

&#xff08;北京&#xff09;HDFS底层存储原理? (北京) HDFS读写数据流程? (北京) HDFS如何管理元数据或者checkpoint的理解 ? (北京) HDFS常用命令 ? (北京) hadoop调优 (北京) HDFS扩容原理 (北京) HDFS有哪些进程,分别是什么? (北京) HDFS中大量小文件对…...

编程日记 2024/3/14 10:05:13

Kubernetes kafka系列 | k8s部署kafka+zookeepe集群

一、kafka.zookeeper介绍 Kafka 简介&#xff1a; Apache Kafka 是一个开源的分布式流处理平台和消息队列系统。它最初由LinkedIn开发&#xff0c;并于2011年成为Apache软件基金会的顶级项目。 特点&#xff1a; 高吞吐量&#xff1a; Kafka 能够处理大规模的消息流&#xf…...

编程日记 2024/3/14 10:02:09

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播 SV-704XT是深圳锐科达电子有限公司的一款壁挂式网络有源号角&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和号角喇叭输出播放&#xff0c;可达到功率50W。SV-704XT内置有…...

编程日记 2024/3/14 9:56:03

B端系统优化，可不是换个颜色和图标，看看与大厂系统的差距。

、不要被流于表面的需求描述迷惑。 很多人找我们优化系统界面&#xff0c;对需求总是轻描淡写&#xff0c;比如&#xff1a;换个颜色、换个图标、换个皮肤&#xff0c;甚至还有的说&#xff0c;随便改下就行。 这些需求都是听起来简单&#xff0c;实现起来难&#xff0c;你如…...

编程日记 2024/3/14 9:53:00

【LeetCode热题100】240. 搜索二维矩阵 II

一.题目要求 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 ‘每列的元素从上到下升序排列。 二.题目难度 中等 三.输入样例 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7…...

编程日记 2024/3/14 9:50:58

three.js 鼠标左右拖动改变玩家视角

这里主要用到了 一个方法 obj.getWorldDirection(); obj.getWorldDirection()表示的获取obj对象自身z轴正方向在世界坐标空间中的方向。 按下 W键前进运动&#xff1b; <template><div><el-container><el-main><div class"box-card-left…...

编程日记 2024/3/14 9:49:57

Pycharm jupyter server process exited with code 1

Pycharm jupyter server process exited with code 1 1. 问题描述2. 原因和解决方法 1. 问题描述 使用 Pycharm 启动 Jupyter 时&#xff0c;报错如下&#xff0c; jupyter server process exited with code 12. 原因和解决方法 Pycharm 启动 jupyter 时&#xff0c;默认的 …...

编程日记 2024/3/14 9:48:57

ubuntu 20.04 Python pip 配置 pip.conf

1. 状况描述 $ pip install timm WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by ProxyError(Cannot connect to proxy., RemoteDisconnected(Remote end closed connection without response)): /simple/t…...

编程日记 2024/3/14 9:47:55

GPT-4.5 Turbo意外曝光，最快明天发布？OpenAI终于要放大招了！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…...

编程日记 2024/3/14 9:45:53

Ubuntu 中 desktop-amd64 和 live-server-amd64 的区别

一、Ubuntu的操作系统镜像 Ubuntu的操作系统镜像主要有两种&#xff1a;desktop-amd64和live-server-amd64 这两者的主要区别在于使用场景和安装方式 1. Desktop-amd64: * 这是Ubuntu的桌面版本&#xff0c;用于安装具有图形用户界面的Ubuntu系统。 * 它包含了用于日常使…...

编程日记 2024/3/14 9:43:50

第10集《天台教观纲宗》

请大家打开讲义第十七页。我们讲到己二、结申正义。 己二、结申正义 《法华经》把我们修行人修行的相貌&#xff0c;比喻作一个车乘。车乘就是一种交通工具&#xff0c;它能够让我们从此岸超越到彼岸去。所以修行它是可以超越的&#xff0c;你今天比昨天超越了&#xff0c;就好…...

编程日记 2024/3/14 9:42:50

每日学习笔记：C++ STL 的forward_list

定义 特点 操作函数 元素查找、移除或安插 forward_list::emplace_after arg...指的是元素构造函数的参数&#xff08;0~N个&#xff09; #include <iostream> #include <memory> #include <list> #include <forward_list> using namespace std;class…...

编程日记 2024/3/14 9:40:47

【Java,Redis】Redis 数据库存取字符串数据以及类数据

1、 字符串存取数据 Resource private StringRedisTemplate stringRedisTemplate;//从Redis中获取string字符串 stringRedisTemplate.opsForValue().get("cache:shop:"id); //Json -> class Shop shop JSONUtil.toBean(ShopJson,Shop.class); //字符串写入redis…...

编程日记 2024/3/14 9:38:45

OpenCV 图像重映射函数remap()实例详解

OpenCV 图像重映射函数remap()对图像应用通用几何变换。其原型如下&#xff1a; void remap(InputArray src, OutputArray dst, InputArray map1, InputArray map2, int interpolation&#xff0c; int borderMode BORDER_CONSTANT&#xff0c; const Scalar & borde…...

编程日记 2024/3/14 9:37:43

Python基础课堂最后一课23——正则对象

文章目录 前言一、正则对象是什么&#xff1f;二、正则表达式基本分类1.普通字符2.元字符 总结 前言 很开心能和你们一些学习进步&#xff0c;在这一个多月的时间中&#xff0c;是你们让我坚持了下来&#xff0c;完成了python基础课堂编写&#xff0c;不管如何&#xff0c;我们…...

编程日记 2024/3/14 9:32:37

【算法训练营】凸包，图（Python实现）

凸包 描述 给定n个二维平面上的点&#xff0c;求他们的凸包。 输入 第一行包含一个正整数n。 接下来n行&#xff0c;每行包含两个整数x,y&#xff0c;表示一个点的坐标。 输出 令所有在凸包极边上的点依次为p1,p2,...,pm&#xff08;序号&#xff09;&#xff0c;其中m表…...

编程日记 2024/3/14 9:30:35

webpack5零基础入门-6webpack处理图片资源

1.在webpack5中file-loader和url-loader为内置模块 通过在加载器中配置rule即可激活 {test: /\.(png|jpe?g|gif|webp)$/,type: asset} 2.使用webpack进行打包 执行npx webpack 可以看到图片资源打包后都被放到了dist文件目录下 3.使用webpack进行图片格式转换为base64 优势…...

编程日记 2024/3/14 9:29:33

告别复杂配置：一键启动MedGemma-X，开启智能阅片新体验

告别复杂配置&#xff1a;一键启动MedGemma-X&#xff0c;开启智能阅片新体验 1. 医疗影像AI的新范式&#xff1a;从标注工具到对话伙伴 1.1 传统影像分析系统的局限性 在放射科日常工作中&#xff0c;医生们常常面临这样的困境&#xff1a;面对一张胸部X光片&#xff0c;需…...

编程新知 2026/4/4 5:43:07

【AI实战项目】项目二：语言模型构建与应用实战

分享一个大牛的人工智能教程。零基础&#xff01;通俗易懂&#xff01;风趣幽默&#xff01;希望你也加入到人工智能的队伍中来&#xff01;请轻击人工智能教程​​https://www.captainai.net/troubleshooter 项目背景&#xff1a; 在当今AI蓬勃发展的时代&#xff0c;语⾔模…...

编程新知 2026/4/4 5:08:54

RTX 50系显卡用户看过来：在Windows上为CUDA 12.8和PyTorch Nightly版安装Triton的实战记录

RTX 50系显卡用户看过来&#xff1a;在Windows上为CUDA 12.8和PyTorch Nightly版安装Triton的实战记录 当GeForce RTX 50系列显卡遇上PyTorch Nightly和CUDA 12.8&#xff0c;这可能是目前最前沿的AI开发环境组合。但官方文档和主流教程往往跟不上硬件迭代的速度&#xff0c;让…...

编程新知 2026/4/4 5:02:38

图灵奖得主杨立昆公开“手撕”Meta 内部环境：“LLM 吸光了房间里的空气”，物理世界才是 AGI 的终局

来源&#xff1a;AI 科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;编译&#xff1a;王启隆Sora 死后&#xff0c;生成式视频路线已到头。2026 年 3 月&#xff0c;在新德里的 AI Alliance Global Leadership Reception 上&#xff0c;Christopher Nguyen 邀请到杨…...

编程新知 2026/4/4 4:40:14

BRV下拉刷新与上拉加载：SmartRefreshLayout集成完整教程

BRV下拉刷新与上拉加载&#xff1a;SmartRefreshLayout集成完整教程 【免费下载链接】BRV [永久维护] Android 快速构建 RecyclerView, 比 BRVAH 更简单强大 项目地址: https://gitcode.com/gh_mirrors/br/BRV BRV&#xff08;Android 快速构建 RecyclerView&#xff09…...

编程新知 2026/4/4 4:28:05

Chain-of-Thought Hub进阶应用：多轮对话和长上下文推理评测

Chain-of-Thought Hub进阶应用&#xff1a;多轮对话和长上下文推理评测 【免费下载链接】chain-of-thought-hub Benchmarking large language models complex reasoning ability with chain-of-thought prompting 项目地址: https://gitcode.com/gh_mirrors/ch/chain-of-thou…...

编程新知 2026/4/4 4:20:03

PHP解决跨域请求问题的两种实用方法详解

引言在Web开发中&#xff0c;跨域资源共享&#xff08;CORS&#xff09;是一个常见的问题&#xff0c;当前端页面与后端API不在同一个域名下时&#xff0c;浏览器的同源策略会阻止跨域请求。本文将介绍两种在PHP中解决跨域请求问题的实用方法。什么是跨域问题&#xff1f;跨域指…...

编程新知 2026/4/4 4:12:00

Vue3 + Element Plus项目实战：如何封装一个带比例锁定和实时预览的智能图片裁剪上传组件？

Vue3 Element Plus实战&#xff1a;构建智能图片裁剪上传组件的工程化实践 在当今的Web应用中&#xff0c;图片上传几乎是每个系统的标配功能。但简单的文件选择器往往无法满足专业需求——设计师需要精确控制图片比例&#xff0c;产品经理要求实时预览效果&#xff0c;而开发…...

编程新知 2026/4/4 3:19:31

OpenClaw模型对比测试：Phi-3-vision-128k与纯文本模型在图文任务表现

OpenClaw模型对比测试&#xff1a;Phi-3-vision-128k与纯文本模型在图文任务表现 1. 测试背景与动机 最近在搭建个人自动化工作流时&#xff0c;遇到了一个典型问题&#xff1a;当OpenClaw需要处理包含图片和表格的文档时&#xff0c;纯文本模型的表现总是不尽如人意。作为一…...

编程新知 2026/4/4 3:01:25

工业质检新思路：当UNet遇上钢材缺陷，聊聊PyTorch实战中的那些‘坑’与优化技巧

工业质检实战&#xff1a;UNet在钢材缺陷检测中的高阶优化与避坑指南 第一次把UNet模型部署到钢厂产线时&#xff0c;我盯着监控屏幕上闪烁的误报提示&#xff0c;意识到学术论文里的漂亮指标和真实工业场景之间&#xff0c;隔着无数个深夜调试的神经网络。钢材表面那些细如发丝…...

编程新知 2026/4/4 2:51:23