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

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

news 2025/7/18 15:47:09

案例

注册事件

<!-- //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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/7/16 10:38:12

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/6/21 12:50:31

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/7/9 22:44:11

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/7/16 6:07:14

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/15 9:11:45

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/18 7:50:12

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/7/8 14:06:13

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/6/21 14:20:00

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/7/9 21:44:14

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/7/6 17:40:31