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

7.事件类型

news 2026/3/29 9:09:18

在这里插入图片描述

7.1鼠标事件

案例-轮播图点击切换
需求：当点击左右的按钮，可以切换轮播图
分析:
①右侧按钮点击，变量++，如果大于等于8，则复原0
②左侧按钮点击，变量–，如果小于0，则复原最后一张
③鼠标经过暂停定时器
④鼠标离开开启定时器
【示例代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1.初始数据const data = [{ url: 'imgs/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: 'imgs/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: 'imgs/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: 'imgs/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },]//获取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')//2.右侧按钮//2.1 获取右侧按钮const next = document.querySelector('.next')let i = 0//2.2 注册点击事件next.addEventListener('click', function () {i++if (i >= data.length) {i = 0}commom()})//3.左侧按钮//3.1 获取左侧按钮const prev = document.querySelector('.prev')//3.2 注册点击事件prev.addEventListener('click', function () {i--if (i < 0) {i = data.length - 1}commom()})//4.声明一个渲染函数作为复用function commom() {//2.3 渲染对应的数据img.src = data[i].urlp.innerHTML = data[i].titlefooter.style.backgroundColor = data[i].color//2.4 更换小圆点 先移除原来的类名，再给当前的li添加active类document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//5.自动播放模块let timeId = setInterval(function () {//利用js自动调用点击事件 click() !next.click()  //click()是一个方法}, 1000)// 6.鼠标经过 暂停定时器const slider = document.querySelector('.slider')slider.addEventListener('mouseenter', function () {clearInterval(timeId)})// 7.鼠标离开 开启定时器slider.addEventListener('mouseleave', function () {//先关闭定时器clearInterval(timeId)//再打开timeId = setInterval(function () {//利用js自动调用点击事件 click() !next.click()}, 1000)})</script>
</body></html>

7.2焦点事件

【示例代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>const input = document.querySelector('input')// const input = document.querySelector('[type=search]')const list = document.querySelector('.result-list')//获得焦点input.addEventListener('focus', function () {list.style.display = 'block'//添加一个带有颜色边框的类名input.classList.add('search')})//失去焦点input.addEventListener('blur', function () {list.style.display = 'none'input.classList.remove('search')})</script>
</body></html>

在这里插入图片描述

7.3文本事件

【示例代码】

<body><input type="text"><script>const inp = document.querySelector('input')inp.addEventListener('input', function () {console.log(inp.value)  //获取用户输入的内容})</script>
</body>

案例-评论字数统计
需求：用户输入文字，可以计算用户输入的字数.
分析:
①判断用输入事件input
②不断取得文本框里面的字符长度，文本域.value.length
③把获得数字给下面文本框
【示例代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')//1.当文本域获得了焦点，就让 total 显示出来tx.addEventListener('focus', function () {total.style.opacity = 1})//2.当文本域失去焦点，就让 total 隐藏起来tx.addEventListener('blur', function () {total.style.opacity = 0})// 3.用户输入tx.addEventListener('input', function () {total.innerHTML = `${tx.value.length}/200字`})</script>
</body></html>

在这里插入图片描述

相关文章：

7.事件类型

7.1鼠标事件 案例-轮播图点击切换 需求&#xff1a;当点击左右的按钮&#xff0c;可以切换轮播图 分析: ①右侧按钮点击&#xff0c;变量&#xff0c;如果大于等于8&#xff0c;则复原0 ②左侧按钮点击&#xff0c;变量–&#xff0c;如果小于0&#xff0c;则复原最后一张 ③鼠…...

编程日记 2023/8/1 23:02:45

ts中声明引入未使用的报错——解决方案

在编写ts项目的时候&#xff0c;经常会出现如下报错&#xff1a; 导入声明中的所有导入都未使用 这是因为导入的模块暂时没有使用&#xff0c;ts给的一个提示信息 解决方案&#xff1a; 在ts.config.json中 把noUnusedLocals 设置为false即可 {"compilerOptions"…...

编程日记 2023/8/1 23:01:42

集团MySQL的酒店管理系统

酒店管理系统 概述 基于Spring Spring MVC MyBatis的酒店管理系统&#xff0c;主要实现酒店客房的预定、入住以及结账等功能。使用Maven进行包管理。 用户端主要功能包括&#xff1a; 登录注册、客房预订、客房评论&#xff08;编写评论和查看评论&#xff09; 后台管理主要…...

编程日记 2023/8/1 23:00:40

Kotlin基础（九）：对象和委托

前言 本文主要讲解kotlin对象和委托。 Kotlin文章列表 Kotlin文章列表: 点击此处跳转查看 目录 1.1 对象 在Kotlin中&#xff0c;对象&#xff08;Object&#xff09;是一个具有特殊用途的单例实例。它是一种创建单个实例的方式&#xff0c;确保在整个应用程序中只存在一个特…...

编程日记 2023/8/1 22:59:38

八大排序算法--希尔排序（动图理解）

目录 希尔排序 概念 算法思路 动画演示 代码如下 复杂度分析 时间复杂度测试 运行结果 完整代码 创作不易&#xff0c;如果本篇博客对您有一定的帮助&#xff0c;大家记得留言点赞哦。 希尔排序 概念 希尔排序是插入排序的一种&#xff0c;是对直接插入排序的优化。其…...

编程日记 2023/8/1 22:58:37

数据结构之常见排序算法

文章目录 1.排序概念2.10种排序比较3.排序算法3.1直接插入排序&#xff08;元素越有序&#xff0c;越高效&#xff09;3.2希尔排序序( 缩小增量排序 )3.3直接选择排序3.5堆排序3.6冒泡排序3.8快速排序 递归实现&#xff08;无序使用最好&#xff09;3.8.1挖坑法 &#xff08;建…...

编程日记 2023/8/1 22:57:35

Java版企业电子招标采购系统源代码Spring Boot + 二次开发 + 前后端分离 构建企业电子招采平台之立项流程图

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…...

编程日记 2023/8/1 22:56:33

2.2 模型与材质基础

一、渲染管线与模型基础 1. 渲染管线 可编程阶段&#xff08;蓝色区域&#xff09;&#xff1a; 1顶点着色器 2几何着色器 3片元着色器 2. 模型的实现原理 UV&#xff1a;在建模软件中&#xff0c;进行UV展开&#xff0c;UV会放在一个横向为U纵向为V&#xff0c;范围&#xff0…...

编程日记 2023/8/1 22:55:32

什么是Docker

一 、什么是Docker 1.1 简介 Docker 使用 Google 公司推出的 Go 语言 (opens new window)进行开发实现&#xff0c;基于 Linux 内核的 cgroup (opens new window)&#xff0c;namespace (opens new window)&#xff0c;以及 OverlayFS (opens new window)类的 Union FS (open…...

编程日记 2023/8/1 22:54:31

1109. 航班预订统计

这里有 n 个航班&#xff0c;它们分别从 1 到 n 进行编号。 有一份航班预订表 bookings &#xff0c;表中第 i 条预订记录 bookings[i] [firsti, lasti, seatsi] 意味着在从 firsti 到 lasti &#xff08;包含 firsti 和 lasti &#xff09;的 每个航班 上预订了 seatsi 个座…...

编程日记 2023/8/1 22:53:29

[SQL挖掘机] - 窗口函数 - 合计: rollup

介绍: rollup 是一种用于在 sql 查询中生成聚合数据的特殊操作。它可以创建包含子总计和总计的结果集&#xff0c;并可用于生成层次化报表或汇总数据。 rollup 操作在 group by 子句中使用&#xff0c;可以在查询结果中生成多级汇总数据。它会根据指定的列进行分组&#xff0…...

编程日记 2023/8/1 22:52:27

2022年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版

四、写作&#xff1a;第56&#xff5e;57小题&#xff0c;共65分。其中论证有效性分析30分&#xff0c;论说文35分。 56.论证有效性分析&#xff1a;分析下述论证中存在的缺陷和漏洞&#xff0c;选择若干要点&#xff0c;写一篇600字左右的文章&#xff0c;对该论证的有效性进…...

编程日记 2023/8/1 22:51:26

元类在测试框架中的运用

元类在测试框架中的运用 书接上回 我们知道了元类的基本用法&#xff0c;也写了一个小demo&#xff0c;接下来我们就尝试运用进我们测试框架。 #一款无需编码且易用于二次开发的接口测试框架。 #我写的我写的我写的我写的 pip install mwj-apitest #这里面就用到了元类&…...

编程日记 2023/8/1 22:50:25

VBA快速交叉分段标记字符颜色

实例需求&#xff1a;A列中有不确定行数的数据&#xff0c;现在需要将数据按照每4位一组间隔标记颜色&#xff0c;如下图所示。 示例代码如下。 Sub Demo()Dim rngCell As RangeDim rngData As RangeDim i, res, intLenSet rngData Range("A1").CurrentRegionrngDa…...

编程日记 2023/8/1 22:49:24

根据Pytorch源码实现的 ResNet18

一&#xff0c;类模块定义: import torch import torch.nn as nn import torch.nn.functional as F from torch import Tensorclass ResBlock(nn.Module):def __init__(self, inchannel, outchannel, stride1) -> None:super(ResBlock, self).__init__()# 这里定义了残差块…...

编程日记 2023/8/1 22:48:20

药品管理系统servlet+jsp+sql医院药店仓库进销存java源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 药品管理系统servletjspsql 系统有1权限&#xff1a;…...

编程日记 2023/8/1 22:47:20

这9个UI设计工具一定码住！非常好用

对于设计师来说&#xff0c;好用的UI设计工具无疑会对设计工作起到事半功倍的作用&#xff0c;今天本文与大家分享9个好用的UI设计工具&#xff0c;一起来看看吧&#xff01; 1、即时设计 即时设计是一个能在网页中直接使用&#xff0c;且支持团队协作的国产UI设计工具&#…...

编程日记 2023/8/1 22:46:19

gin通过反射来执行动态的方法

在gin中&#xff0c;可以通过反射来执行对应的方法。下面是一个示例&#xff1a; package mainimport ("fmt""github.com/gin-gonic/gin""reflect" )type UserController struct{}func (uc *UserController) GetUser(c *gin.Context) {userId :…...

编程日记 2023/8/1 22:45:18

java高并发系列 - 第23天：JUC中原子类，一篇就够了

java高并发系列 - 第23天：JUC中原子类 这是java高并发系列第23篇文章，环境：jdk1.8。 本文主要内容 JUC中的原子类介绍介绍基本类型原子类介绍数组类型原子类介绍引用类型原子类介绍对象属性修改相关原子类预备知识 JUC中的原子类都是都是依靠volatile、CAS、Unsafe类配合…...

编程日记 2023/8/1 22:44:16

《HeadFirst设计模式(第二版)》第一章源码

代码文件目录结构&#xff1a; FlyBehavior.java package Chapter1_StrategyPattern.ch1_3_behavior.behaviors.fly;public interface FlyBehavior {void fly(); } FlyNoWay.java package Chapter1_StrategyPattern.ch1_3_behavior.behaviors.fly;public class FlyNoWay imp…...

编程日记 2023/8/1 22:43:14

告别音乐标签混乱难题：Music Tag Web的智能高效解决方案

告别音乐标签混乱难题&#xff1a;Music Tag Web的智能高效解决方案 【免费下载链接】music-tag-web 音乐标签编辑器&#xff0c;可编辑本地音乐文件的元数据&#xff08;Editable local music file metadata.&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mu/musi…...

编程新知 2026/3/29 9:08:00

用tcpreplay+Wireshark搭建网络攻防实验环境：手把手教你复现渗透测试流量

实战指南&#xff1a;用tcpreplay与Wireshark构建网络攻防实验环境 在网络安全领域&#xff0c;理论知识的掌握固然重要&#xff0c;但真正的技能提升往往来自于实战演练。然而&#xff0c;直接在真实网络环境中进行渗透测试或攻击模拟不仅存在法律风险&#xff0c;还可能对生…...

编程新知 2026/3/29 8:53:55

vLLM-v0.17.1效果展示：vLLM在中文长文本摘要任务中的准确率实测

vLLM-v0.17.1效果展示&#xff1a;vLLM在中文长文本摘要任务中的准确率实测 1. vLLM框架简介 vLLM是一个专注于提升大语言模型推理效率的开源库&#xff0c;它的核心目标是让开发者能够更轻松地部署和使用各类大模型。这个项目最初由加州大学伯克利分校的研究团队发起&#x…...

编程新知 2026/3/29 7:59:33

Anything V5服务优化指南：如何调整参数获得最佳生成效果

Anything V5服务优化指南&#xff1a;如何调整参数获得最佳生成效果 1. 理解Anything V5的核心参数 1.1 分辨率设置对生成效果的影响 Anything V5支持多种分辨率设置&#xff0c;但不同分辨率会直接影响生成速度和质量&#xff1a; 512x512&#xff1a;默认设置&#xff0c…...

编程新知 2026/3/29 6:26:25

Qwen3-ForcedAligner-0.6B效果对比：较Whisper-v3在粤语场景提升12.7%准确率

Qwen3-ForcedAligner-0.6B效果对比&#xff1a;较Whisper-v3在粤语场景提升12.7%准确率 1. 引言&#xff1a;当语音识别遇上粤语&#xff0c;谁更懂你&#xff1f; 想象一下&#xff0c;你正在处理一段重要的粤语会议录音&#xff0c;需要把它转成文字并配上精确到每个字的时…...

编程新知 2026/3/29 6:18:24

SAM3优化指南：如何调节掩码精细度获得更好边缘效果

SAM3优化指南&#xff1a;如何调节掩码精细度获得更好边缘效果 1. 引言&#xff1a;为什么需要调节掩码精细度 在实际使用SAM3进行图像分割时&#xff0c;很多用户会遇到一个共同的问题&#xff1a;生成的物体边缘不够精细。比如分割一只猫时&#xff0c;毛发边缘显得生硬&am…...

编程新知 2026/3/29 5:58:15

FigmaCN：消除语言壁垒的中文界面本地化解决方案

FigmaCN&#xff1a;消除语言壁垒的中文界面本地化解决方案 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN FigmaCN是一款专为中文设计师打造的浏览器插件&#xff0c;通过3800条人工校…...

编程新知 2026/3/29 5:21:58

AI 模型量化精度与推理速度平衡

AI模型量化精度与推理速度平衡&#xff1a;智能时代的效率与质量博弈 在人工智能技术快速发展的今天&#xff0c;AI模型的部署效率成为关键挑战。模型量化技术通过降低计算精度来提升推理速度&#xff0c;但如何在精度损失与速度提升之间找到平衡&#xff0c;成为开发者关注的…...

编程新知 2026/3/29 4:27:08

免费开源策略卡牌：如何在无名杀中创造你的专属三国战场

免费开源策略卡牌&#xff1a;如何在无名杀中创造你的专属三国战场 【免费下载链接】noname 项目地址: https://gitcode.com/GitHub_Trending/no/noname 在当今数字游戏世界中&#xff0c;有一款独特的开源策略卡牌游戏正悄然改变着玩家与游戏的关系。这款名为"无…...

编程新知 2026/3/29 3:52:48

《QGIS快速入门与应用基础》245：单个元素选择与拖拽

作者：翰墨之道，毕业于国际知名大学空间信息与计算机专业，获硕士学位，现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发，精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架，兼具…...

编程新知 2026/3/29 1:17:21