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

【18.0】JavaScript---事件案例

news 文章来源：https://blog.csdn.net/2401_83569627/article/details/139753449 2025/2/5 13:49:44

【18.0】JavaScript—事件案例

【一】开关灯事件

  • 【介绍】设置一个按钮，按下按钮触发事件，来回切换圆形图片的颜色

  • 【分析】

    • 图片设置：设置成圆形的图片
    • 背景颜色：设置红绿两个颜色，来回切换
    • 按钮设置：点击按钮触发事件，事件为切换背景颜色

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关灯事件</title><style>/*设置图片*/.c1{height:200px;width:200px;border-radius: 50%;}.bd_green{background-color: green;}.bd_red{background-color: red;}</style>
</head>
<body><!--设置背景图片-->
<div id="bg_picture"  class="c1 bd_green bd_red"></div>
<!--按钮-->
<button id="button1">点击按钮变色</button><!--配置变色事件-->
<script>//找到按钮标签let btnEle=document.getElementById("button1")//找到图片标签let picEle=document.getElementById("bg_picture")//为按钮绑定图片进行触发btnEle.onclick=function(){//动态修改图片属性，toggle有则删除，无则添加（实现切换)picEle.classList.toggle("bd_red")}
</script></body>
</html>

【二】input框获取/失去焦点

  • 【焦点概念】

    • 获得和失去焦点是鼠标行为，现在有一个输入框，当鼠标放在输入框点击的时候，就是在获得焦点，当鼠标移走到其他输入框或区域，无法编辑，就是失去焦点

  • 【分析】

    • 获得焦点：是在收集信息，我们需要将收集的信息储存起来
    • 失去焦点：无法收集到用户的信息，可以给一个默认值

  • 【效果】

    • 如果点击输入框输入内容 没异常
    • 如果点击输入框并且没输入 鼠标移走会显示我们提前准备的默认内容

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点事件</title>
</head>
<body><!--定义输入框-->
<input type="text" value="您的姓名" id="d1"><script>//获得输入框标签let inpEle=document.getElementById('d1');//将输入框标签变成 获得焦点事件inpEle.onfocus=function(){inpEle.value="";}//将输入框变成 失去焦点事件inpEle.onblur=function(){inpEle.value="没输入";}
</script></body>
</html>

【三】实时展示当前时间

【1.0】基础版

  • 【分析】

    • 设置一个框框
    • 将时间事件绑定到框中，触发后自动将时间填入框中
    • 【问题】只能展示打开这一刻的时间

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时间事件</title>
</head>
<body><!--定义输入框-->
<input type="text" id="d1"><script>//获得输入框标签let inpEle=document.getElementById('d1');//设置自动填充时间功能(function showtime(){//找到当前时间let currentTime=new Date()//填入到框里inpEle.value=currentTime.toString();})()</script></body>
</html>

【2.0】动态访问时间

  • 【分析】通过时间计时器，设置动态的触发事件，可以设置每个一秒就触发函数，更新时间

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时间事件</title>
</head>
<body><!--定义输入框-->
<input type="text" id="d1"><script>//获得输入框标签let inpEle=document.getElementById('d1');//设置自动填充时间功能function showtime(){//找到当前时间let currentTime=new Date()//填入到框里inpEle.value=currentTime.toString();}//增加触发器setInterval(showtime,1000)
</script></body>
</html>

【3.0】改善版

  • 【分析】

    • 上述的代码只能一直运行，不能结束，自动结束的就是上节课，进行嵌套函数，多少秒后自动关闭
    • 我们现在设置两个按钮，一个控制时间开始更新，另一个控制将计时器关闭

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时间事件</title>
</head>
<body><!--定义输入框-->
<input type="text" id="d1"><!--设置两个按钮，一个可以开始，一个控制结束-->
<button id="b1">点我开始时间</button>
<button id="b2">点我结束时间</button><script>//定义一个量 用于储存定时器let t=null//获得输入框标签let inpEle=document.getElementById('d1');//获得两个按钮的标签let startEle=document.getElementById('b1');let endEle=document.getElementById('b2');//设置自动填充时间功能function showtime(){//找到当前时间let currentTime=new Date()//填入到框里inpEle.value=currentTime.toString();}//增加触发器,并绑定成点击触发事件，开始计时器startEle.onclick=function(){//如果t是空，说明计时器没工作，所以开始if(!t){t=setInterval(showtime,1000)}}//点击触发关闭事件,关闭计时器endEle.onclick=function(){clearInterval(t);t=null;}
</script></body>
</html>

【四】省市联动

  • 【问题介绍】

    • 平时的省和市的选择，实现我们点击第一个框出现某个省，第二个输入框里的内容自动变成其市

  • 【分析】

    • 【界面中】需要定义两个框，第一个是省份，第二个是城市
    • 【数据】先自己写一组数据字典，省份为键，相应城市列表为值
    • 【处理数据】
      • 展示数据的时候，需要遍历省和城市
      • 将遍历好的数据，放入我们的文本框

  • 【代码】

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--设置两个输入框-->
<select name="" id="d1"><option value="" selected disabled>----请选择省份----</option>
</select>
<select name="" id="d2"></select><script>//省份数据data={"河北省": ["廊坊", "邯郸", "保定"],"北京": ["朝阳区", "海淀区", "遵化市"],"山东": ["威海市", "烟台市"],};//拿到两个框对象let proEle=document.getElementById('d1');let cityEle=document.getElementById('d2');//for循环遍历数据，对第一个省份框进行操作for(key in data){//遍历的是省份的名字，将遍历的结果做成选项，添加到第一个框//创建option标签let opEle=document.createElement('option')//给option标签设置属性，和属性值opEle.innerText=keyopEle.value = key//放入到第一个框proEle.appendChild(opEle)}//对第二个框进行数据处理// 文本域变化事件 --- change 事件proEle.onchange = function () {// （1） 先获取到用户选择的省份let currentPro = proEle.value;// (2) 获取对应的市let currentCityList = data[currentPro];// 清空市中全部的信息cityEle.innerHTML = '';// 加一个请选择框let oppEle = '<option selected disabled>--请选择--</option>'cityEle.innerHTML = oppEle// (3) for 循环 将所有的市渲染到第二个标签for (let i = 0; i < currentCityList.length; i++) {let currentCity = currentCityList[i];// (1) 创建option标签let proEle = document.createElement("option");// (2) 设置属性proEle.innerText = currentCity// (3) 设置值proEle.value = currentCity// ----->  <option value="省">省</option>// (4) 将创建好的标签添加到第一个选项框中cityEle.appendChild(proEle)}}
</script>
</body>
</html>

相关文章：

【18.0】JavaScript---事件案例

【18.0】JavaScript—事件案例 【一】开关灯事件 【介绍】设置一个按钮&#xff0c;按下按钮触发事件&#xff0c;来回切换圆形图片的颜色 【分析】 图片设置&#xff1a;设置成圆形的图片背景颜色&#xff1a;设置红绿两个颜色&#xff0c;来回切换按钮设置&#xff1a;点击…...

编程日记 2024/6/21 5:50:56

推荐系统三十六式学习笔记：原理篇.矩阵分解12|如果关注排序效果，那么这个模型可以帮到你

目录 矩阵分解的不足贝叶斯个性化排序AUC构造样本目标函数训练方法 总结 矩阵分解在推荐系统中的地位非常崇高。它既有协同过滤的血统&#xff0c;又有机器学习的基因&#xff0c;可以说是非常优秀了&#xff1b;但即便如此&#xff0c;传统的矩阵分解无论是在处理显式反馈&…...

编程日记 2024/6/21 5:48:54

Kafka之ISR机制的理解

文章目录 Kafka的基本概念什么是ISRISR的维护机制ISR的作用ISR相关配置参数同步过程示例代码总结 Kafka中的ISR&#xff08;In-Sync Replicas同步副本&#xff09;机制是确保数据高可用性和一致性的核心组件。 Kafka的基本概念 在Kafka中&#xff0c;数据被组织成主题&#xf…...

编程日记 2024/6/21 5:47:52

如何设计一个点赞系统

首先我们定义出一个点赞系统需要对外提供哪些接口&#xff1a; 1.用户对特定的消息进行点赞&#xff1b; 2.用户查看自己发布的某条消息点赞数量以及被哪些人赞过&#xff1b; 3.用户查看自己给哪些消息点赞过&#xff1b; 这里假设每条消息都有一个message_id, 每一个用户都…...

编程日记 2024/6/21 5:46:49

对象存储测试工具-s3cmd

一、环境安装 官网&#xff1a;https://s3tools.org/s3cmd 下载安装包&#xff1a;https://s3tools.org/download GitHub&#xff1a;https://github.com/s3tools/s3cmd/releases 本文安装包&#xff1a;https://github.com/s3tools/s3cmd/releases/download/v2.0.2/s3cmd-2.0…...

编程日记 2024/6/21 5:45:48

OpenCV--图像色彩空间及转换

图像色彩空间及转换 python代码和笔记 python代码和笔记 import cv2 色彩空间&#xff0c;基础&#xff1a;RGB或BGR OpenCV中&#xff1a; 一、HSV(HSB)&#xff1a;用的最多&#xff0c; Hue&#xff1a;色相-色彩(0-360)&#xff0c;红色&#xff1a;0&#xff0c;绿色&…...

编程日记 2024/6/21 5:44:46

RIP解决不连续子网问题

#交换设备 RIP解决不连续子网问题 一、不连续子网的概念 相同主网下的子网&#xff0c;被另一个主网分割&#xff0c;例如下面实验拓扑在某公司的网络整改项目中&#xff0c;原先R1 和RS 属于同一主网络 10.0.0.0/8&#xff0c;现被 R2、R3、R4 分离&#xff0c;整网采用了 …...

编程日记 2024/6/21 5:43:45

动态轮换代理IP是什么？有什么用？

如果您要处理多个在线帐户&#xff0c;选择正确的代理类型对于实现流畅的性能至关重要。但最适合这项工作的代理类型是什么&#xff1f; 为了更好地管理不同平台上的多个账户并优化成本&#xff0c;动态住宅代理IP通常作用在此。 一、什么是轮换代理&#xff1f; 轮换代理充当…...

编程日记 2024/6/21 5:42:43

MAC配置VScode中C++项目debug环境

文章目录 配置步骤问题解决Unable to start debugging. LLDB exited unexpectedly with exit code 137 (0x89). 配置步骤 在Mac上配置VS Code以进行C调试涉及几个步骤&#xff1a; 安装必要的工具: 确保您已经安装了Visual Studio Code和C插件。 检查是否安装了Clang&#xf…...

编程日记 2024/6/21 5:41:42

PostgreSQL源码分析——CREATE CAST

CREATE CAST源码分析 CREATE CAST用法 CREATE CAST —— 定义一个用户自定义的类型转换 用法如下&#xff1a; CREATE CAST (source_type AS target_type)WITH FUNCTION function_name [ (argument_type [, ...]) ][ AS ASSIGNMENT | AS IMPLICIT ]CREATE CAST (source_type…...

编程日记 2024/6/21 5:40:41

解锁5G新营销：视频短信的优势与全方位推广策略

随着5G时代的全面来临&#xff0c;企业的数字化转型步伐日益加快&#xff0c;视频短信作为新兴的数字营销工具&#xff0c;正逐步展现出其巨大的潜力。视频短信群发以其独特的形式和内容&#xff0c;将图片、文字、视频、声音融为一体&#xff0c;为用户带来全新的直观感受&…...

编程日记 2024/6/21 5:39:39

视频监控平台功能：国外的硬盘录像机NVR通过ISUP协议(原ehome协议)接入AS-V1000视频平台

目录 一、背景说明 二、ISUP协议介绍 1、海康ISUP协议概述 2、ISUP协议支持主码流和子码流切换 &#xff08;1&#xff09;灵活配置和个性化 &#xff08;2&#xff09;适应不同网络带宽&#xff0c;提高使用体验 3、海康ehome相关文章 三、ISUP协议接入说明 1、平台侧…...

编程日记 2024/6/21 5:36:35

PostgreSQL查询用户

在 PostgreSQL 中&#xff0c;可以通过查询系统表来确定当前用户是否是超级管理员&#xff08;超级用户&#xff09;。具体来说&#xff0c;可以使用 pg_roles 系统表&#xff0c;该表包含数据库中所有角色的信息。 以下是查询当前用户是否是超级用户的 SQL 语句&#xff1a; …...

编程日记 2024/6/21 5:34:29

力扣1539.第k个缺失的正整数

力扣1539.第k个缺失的正整数 占位运算 只要n<k &#xff0c;k;最终k就是结果 class Solution {public:int findKthPositive(vector<int>& arr, int k) {for(int n : arr){if(n < k) k ;else break;}return k;}};...

编程日记 2024/6/21 5:32:25

如何快速解决屏幕适配问题

下面将利用postcss插件快速解决屏幕适配问题。仅用少量代码&#xff0c;新手均可快速使用。 Step1. 安装 npm install postcss-px-to-viewport-8-plugin --save-dev Step2. 新建 postcss.config.js 文件&#xff0c;做基础配置 module.exports {plugins: {postcss-px-to-v…...

编程日记 2024/6/21 5:30:22

Go基础编程 - 09 - 通道（channel）

通道&#xff08;channel&#xff09; 1. 声明2. channel的操作3. 无缓冲通道4. 有缓冲通道5. 如何优雅的从通道循环取值6. 单向通道7. 异常总结 上一篇&#xff1a;结构体 Go语言的并发模式&#xff1a;不要通过共享内存来通信&#xff0c;而应该通过通信来共享内存。 Go语言…...

编程日记 2024/6/21 5:29:21

[SAP ABAP] 数据类型

1.基本数据类型 示例1 默认定义的基本数据类型是CHAR数据类型 输出结果: 示例2 STRING数据类型用于存储任何长度可变的字符串 输出结果: 示例3 DATE数据类型用于存储日期信息&#xff0c;并且可以存储8位数字 输出结果: 提示Tips&#xff1a;日期和时间类型的变量可以直接进…...

编程日记 2024/6/21 5:28:20

什么是Vue开发技术

概述 Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;它设计得非常灵活&#xff0c;可以轻松地被集成到任何项目中。 vue是视图的发音&#xff0c;其目的是帮助开发者易于上手&#xff0c;提供强大的功能构建复杂的应用程序 示例 以下是vue基本的语法概述 声明式渲…...

编程日记 2024/6/21 5:27:18

【QT】

通信服务端实现 widget.h文件 #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QTcpServer>//服务器类 #include <QMessageBox>//消息 #include <QTcpServer> #include <QList> #include <QTcpSocket> QT_BEGIN_NAMESPAC…...

编程日记 2024/6/21 5:26:17

【转载】使用 .NET Upgrade Assistant（升级助手）升级 .NET 老旧版本项目

使用 .NET Upgrade Assistant&#xff08;升级助手&#xff09;升级 .NET 老旧版本项目&#xff1a;https://blog.csdn.net/ChaITSimpleLove/article/details/134711604...

编程日记 2024/6/21 5:25:15

SpringBoot如何自定义启动Banner 以及自定义启动项目控制台输出信息 类似于若依启动大佛 制作教程

前言 Spring Boot 项目启动时会在控制台打印出一个 banner&#xff0c;下面演示如何定制这个 banner。 若依也会有相应的启动动画 _ooOoo_o8888888o88" . "88(| -_- |)O\ /O____/---\____. \\| |// ./ \\||| : |||// \/ _||||| -:- |||||- \| | \\…...

编程日记 2024/6/21 5:24:14

访问控制列表(Access Control Lists，ACL)与哈希查找的爱恨情怨

访问控制列表&#xff08;Access Control Lists&#xff0c;ACL&#xff09;与哈希查找 什么是访问控制列表ACL&#xff1f;直接说ACL是干啥的ACL概念为什么需要ACLACL类型ACL匹配机制使用例子 哈希查找什么是哈希查找&#xff1f;哈希查找的基本原理哈希查找的步骤 哈希查找在…...

编程日记 2024/6/21 5:23:11

一文讲清楚分销裂变是什么？怎么做好分销裂变？【附案例】

在数字化营销日益盛行的今天&#xff0c;分销裂变作为一种高效的推广手段&#xff0c;受到了越来越多企业的青睐。那么&#xff0c;分销裂变究竟是什么&#xff1f;我们又该如何做好分销裂变呢&#xff1f;林叔将从定义、方法以及案例分析三个方面进行阐述。 一、分销裂变是什…...

编程日记 2024/6/21 5:22:10

Mybatis Plus 详解 IService、BaseMapper、自动填充、分页查询功能

结构直接看目录 前言 MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 愿景 我们的愿景是成为 MyBatis 最好的搭档&#xff0c;就像 魂斗罗 中的 1P、2P&#xff0c;基友搭配&#xff0c;效…...

编程日记 2024/6/21 5:20:06

鸿蒙开发组件：【FA模型的Context】

FA模型的Context FA模型下只有一个Context。Context中的所有功能都是通过方法来提供的&#xff0c;它提供了一些featureAbility中不存在的方法&#xff0c;相当于featureAbility的一个扩展和补全。 接口说明 FA模型下使用Context&#xff0c;需要通过featureAbility下的接口…...

编程日记 2024/6/21 5:19:04

Linux下手动修改服务器时间（没网环境下）

在客户服务器上更新程序时&#xff0c;发现服务器时间不对&#xff0c;现在应该是下午13:44:00&#xff0c;但服务器却显示为&#xff1a;21:40:53&#xff0c;所有是不对的。 date解决办法&#xff1a; 1、由于服务器是没有网的&#xff0c;只能手动设置时间&#xff0c;输入…...

编程日记 2024/6/21 5:18:01

嵌入式系统软件开发环境_3.主要功能和典型产品

1.嵌入式系统软件开发环境的主要功能 由于嵌入式系统的软件开发通常采用的是交叉开发方式&#xff0c;因此其开发环境中的工具应支持这种交叉开发的特点。嵌入式系统软件开发环境的功能应覆盖嵌入式软件开发过程&#xff0c;即编码过程、编译过程、构建过程、下载过程、调式过程…...

编程日记 2024/6/21 5:14:57

使用Python保护或加密Excel文件的7种方法

目录 安装Python Excel库 Python 使用文档打开密码保护 Excel 文件 Python 使用文档修改密码保护 Excel 文件 Python 将 Excel 文件标记为最终版本 Python 保护 Excel 工作表 Python 在保护 Excel 工作表的同时允许编辑某些单元格 Python 锁定 Excel 工作表中的特定单元…...

编程日记 2024/6/21 5:13:56

【嵌入式Linux】＜总览＞ 文件IO（更新中）

文章目录 前言 一、常用函数 1. open函数 2. close函数 3. write函数 4. read函数 5. dup函数 6. dup2函数 二、文件读写细节 1. 换行符 2. 文件描述符 3. errno和perror 前言 在Linux系统中&#xff0c;一切皆文件。因此&#xff0c;掌握Linux下文件IO常用的函数…...

编程日记 2024/6/21 5:12:54

【无线传感网】分簇路由算法介绍

目录 1、LEACH路由算法 2、PEGASIS 算法 3、TEEN 算法 5、APTEEN 5、LEACH-C 算法 无线传感网中的路由协议就是寻找一条路径让网络中节点沿着这条路径将数据信息传输出去。路由协议的两大关键要点就是路径的优化和数据的分组，在传统计算机网络中，是将网络的拓扑…...

编程日记 2024/6/21 5:10:52

wordpress 多多进宝/成都网站建设公司排名

中文的引号 与英文的引号&#xff0c;只有英文的表示字符串 >>> text “我来到北京清华大学”File "<stdin>", line 1text “我来到北京清华大学”^>>> text "我来到北京清华大学"...

编程日记 2025/2/5 13:23:09

新疆维吾尔自治区官网/宁波seo外包平台

动态加载JS过程中如何判断JS加载完成 在正常的加载过程中&#xff0c;js文件的加载是同步的&#xff0c;也就是说在js加载的过程中&#xff0c;浏览器会阻塞接下来的内容的解析。这时候&#xff0c;动态加载便显得尤为重要了&#xff0c;由于它是异步加载&#xff0c;因此&…...

编程日记 2025/2/5 12:56:50

wordpress首页五格/二十条优化措施原文

------------吾亦无他,唯手熟尔&#xff0c;谦卑若愚&#xff0c;好学若饥------------- 拦截器Interceptor: 对处理方法进行双向的拦截&#xff0c;可以对其做日志记录等 我选择的是实现HandlerInterceptor接口 我把执行流程放上来&#xff0c;单个拦截器的和多个拦截器的&…...

编程日记 2025/2/5 12:37:24

网页设计与网站建设作品/电子商务seo实训总结

package cn.kgc;import java.util.Scanner;/*** 吃货联盟订餐管理系统****/public class Chlm2 {public static void main(String[] args) {// 数据主体&#xff1a;一组订单信息String[] names new String[4]; // 订餐人名称String[] dishMegs new String[4]; // 所选菜品in…...

编程日记 2025/2/5 11:53:44

济南做网站的公司哪家好/ks数据分析神器

最近实现一个算法要用到求逆等矩阵运算&#xff0c;在网上搜到一个别人写的矩阵类&#xff0c;试了一下效果不错&#xff0c;贴在这里&#xff0c;做个保存。 matrix.h文件&#xff1a; 1 #ifndef __MATRIX_H__2 #define __MATRIX_H__3 4 #pragma once5 6 #include <iostrea…...

编程日记 2025/2/5 9:24:05

自己做免费网站的视频/免费建立个人网站申请

通过Keepalived搭建MYSQL双主模式的高可用集群系统一.MYSQL replication介绍&#xff1a;MYSQL replication是MYSQL自身提供的一个主从复制功能&#xff0c;就是一台MYSQL服务器(slave)从另外一台MYSQL服务器(master)上复制日志&#xff0c;然后解析日志应用到自身的过程。MYSQ…...

编程日记 2025/2/5 6:36:54