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

7.事件类型

news 文章来源：https://blog.csdn.net/m0_74891783/article/details/132004032 2025/5/14 8:16:41

在这里插入图片描述

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

insert into select用法

文章目录 一、insert into select二、insert into select插入失败 本篇文章主要讲解insert into select 的用法&#xff0c;以及insert into select的坑或者注意事项。本篇文章中的sql基于mysql8.0进行讲解 一、insert into select 该语法常用于从另一张表查询数据插入到某表中…...

编程日记 2023/8/1 22:42:13

图像识别技术：计算机视觉的进化与应用展望

导言&#xff1a; 图像识别技术是计算机视觉领域的重要研究方向&#xff0c;它使计算机能够理解和解释图像内容&#xff0c;从而实现自动化和智能化的图像处理。随着深度学习等技术的快速发展&#xff0c;图像识别在诸多领域取得了重大突破&#xff0c;如自动驾驶、医疗影像分析…...

编程日记 2023/8/1 22:41:12

【免费送书】重新定义Python学习！

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…...

编程日记 2023/8/1 22:40:11

Qt 4. 发布exe

把ex2.exe放在H盘Ex2文件夹下&#xff0c;执行 H:\Ex2>windeployqt ex2.exe H:\Ex2>windeployqt ex2.exe H:\Ex2\ex2.exe 64 bit, release executable Adding Qt5Svg for qsvgicon.dll Skipping plugin qtvirtualkeyboardplugin.dll due to disabled dependencies (Qt5…...

编程日记 2023/8/1 22:39:10

消息队列的使用场景以及优缺点

消息队列是一种在应用系统之间传递消息的通信模式。它允许发送者将消息发布到一个队列中&#xff0c;而接收者则从队列中获取消息进行处理。 消息队列的主要特点包括&#xff1a; 异步通信&#xff1a;消息的发送和接收是异步进行的&#xff0c;发送者无需等待接收者的即时响应…...

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

掌握Python的X篇_17_循环语句(while；for var in ；range)

文章目录 1. 为什么需要循环2. while循环3. for...in循环4. range函数 1. 为什么需要循环 循环语句方便我们做重复的事情&#xff0c;比如&#xff1a; for i in range (0,3):print("重要的事情说三遍")运行效果如下&#xff1a; Python中有while循环和for循环两…...

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

IDEA maven 报错 malformed \uxxx encoding

IDEA maven 报错 malformed \uxxx encoding 最近搞几个JAVA项目总是出现上面错误&#xff0c;在网上搜的大部分都是删maven库&#xff0c;删jar包等等&#xff0c;每次都搞了好久才解决&#xff0c;今天无意中发现并不是包的问题&#xff0c; 解决办法 1.点击 idea 右侧的ma…...

编程日记 2023/8/1 22:36:04

Django实现音乐网站 ⑵

使用Python Django框架制作一个音乐网站&#xff0c;在系列文章1的基础上继续开发&#xff0c;本篇主要是后台歌手表模块开发。 目录 表结构设计 歌手表&#xff08;singer&#xff09;结构 创建表模型 设置图片上传路径 创建上传文件目录 生成表迁移 执行创建表 后台管…...

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

Vue 基础语法（二）

一、背景&#xff1a; 我们对于基础语法&#xff0c;说白了就是实现元素赋值&#xff0c;循环&#xff0c;判断&#xff0c;以及事件响应即可&#xff01; 二、v-bind 我们已经成功创建了第一个 Vue 应用&#xff01;看起来这跟渲染一个字符串模板非常类似&#xff0c;但是 V…...

编程日记 2023/8/1 22:34:02

kafka raft协议

1、首先要了解kafka是什么（Scala） Kafka是一个分布式的消息订阅系统，消息被持久化到一个topic中，topic是按照“主题名-分区”存储的，一个topic可以分为多个partition，在parition(分区)内的每条消息都有一个有序的id号，这个id号被称为偏移(offset），记录消息的消息位置…...

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