前端事件案例补充

目录

定时器示例

搜索框示例

省市联动


定时器示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button><script>var t;function showTime() {var i1Ele = document.getElementById('i1');var time = new Date();i1Ele.value = time.toLocaleString();}showTime();var b1Ele = document.getElementById('b1');b1Ele.onclick = function (ev) {if (!t){t = setInterval(showTime,1000)}};var b2Ele = document.getElementById('b2');b2Ele.onclick = function (ev) {clearInterval(t);t = undefined};</script>
</body>
</html>

搜索框示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>搜索框示例</title></head>
<body>
<input id="d1" type="text" username="aa" placeholder="请输入关键字" onblur=
"blur1()" onfocus="focus1()"><script>function focus1() {var inputEle = document.getElementById("d1");var placehold=inputEle.getAttribute('placeholder');console.log(placehold);// if (inputEle.value === "请输入关键字") {if (placehold === "请输入关键字") {inputEle.value = "";}}function blur1() {var inputEle = document.getElementById("d1");// var val = inputEle.value;var val=inputEle.getAttribute('placeholder');if (!val.trim()) {// inputEle.value = "请输入关键字";inputEle.setAttribute('placeholder', '请输入关键字111'); // 如何去修改标签的属性}}
</script>
</body>
</html>

省市联动

<!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"><title>select联动</title></head>
<body>
<select name="" id="province"><option value="">请选择</option></select><select name="" id="city"><option value="">请选择</option>
</select><script>var data = {"河北省": ["廊坊", "邯郸", "保定",  "石家庄"],"北京": ["朝阳区", "海淀区", "大兴区", "通州区"],"河南省": ["郑州", "周口", "信阳", "洛阳"],"江苏省": ["南京", "苏州", "徐州", "无锡"],"浙江省": ["杭州", "绍兴", "温州", "嘉兴"],"上海": ["黄浦区", "普陀区", "闵行区", "浦东新区"],};var province = document.getElementById('province');var city = document.getElementById('city');// 1. 要循环data数据,拿到data数据的key值是省作为第一个下拉框的数据for (var i in data) {// 这里的i值就是data 的key值,其实就是省数据// console.log(data[i])// 2. 创建option标签,怎么样创建标签var option = document.createElement('option');// 3. 给option标签设置value值和文本数据option.value = i;  // <option value="河北省">河北省</option>option.innerText = i; // <option value="北京">北京</option>// 4. 把option追加到省的select中取province.appendChild(option);}// 接下来给省的下拉框绑定事件province.onchange = function () {// 1. 先拿到当前用户选择的是哪个省的数据// var current_province = province.value;var current_province = this.value;// 2. 根据选择的省获取对应的市信息var current_city_list = data[current_province]; // ["朝阳区", "海淀区", "大兴", "通州"],city.innerText = '';// 3. 循环的把获取到的所有市列表放到第二个select框去for (var i = 0; i < current_city_list.length; i++) {var option = document.createElement('option'); // <option value=""></option>// 4. 给city标签设置value值和文本数据option.value = current_city_list[i];option.innerText = current_city_list[i];// 5. 把city追加到省的select中取city.appendChild(option);}}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker Tomcat 搭建文件服务器

本文基于openwrt上进行。 步骤 1: 安装 Docker 如果尚未安装Docker&#xff0c;首先需要安装Docker。根据你的操作系统&#xff0c;参考Docker官方文档来完成安装, 这里不做详细介绍。 步骤 2: 拉去docker Tomcat镜像 进入openwrt管理界面&#xff0c;docker选项中 拉取最新…

【移远QuecPython】EC800M物联网开发板的内置GNSS定位获取(北斗、GPS和GNSS)

【移远QuecPython】EC800M物联网开发板的内置GNSS定位获取&#xff08;北斗、GPS和GNSS&#xff09; 测试视频&#xff08;其中的恶性BUG会在下一篇文章阐述&#xff09;&#xff1a; 【移远QuecPython】EC800M物联网开发板的内置GNSS定位的恶性BUG&#xff08;目前没有完全的…

【华为OD题库-018】AI面板识别-Java

题目 Al识别到面板上有N(1<N≤100)个指示灯&#xff0c;灯大小一样&#xff0c;任意两个之间无重叠。由于AI识别误差&#xff0c;每次识别到的指示灯位置可能有差异&#xff0c;以4个坐标值描述Al识别的指示灯的大小和位置(左上角x1,y1&#xff0c;右下角x2.y2)。请输出先行…

三、IPSec VPN原理

IPSec 1、IPSec起源和定义2、IPSec原理2.1、IPSec协议框架2.1.1、安全联盟2.1.2、安全协议2.1.3、安全协议报文头结构2.1.4、封装模式2.1.5、加密和验证2.1.6、IKE安全机制 2.2、IPSec基本原理2.2.1、定义IPSec保护的数据流2.2.2、IKEv2协商安全联盟的过程 2.3、IPSec增强原理2…

uniapp之actionsheet 自定义组件

uniapp本身自带的actionsheet太丑&#xff0c;不够美观。闲着也是闲着&#xff0c;自己实现了一个类似的选择器。 支持功能&#xff1a; 1、左对齐 2、右对齐 3、居中 4、可加图标 下面贴出使用教程&#xff1a; <template><view><action-sheet alignment&…

go测试库之apitest

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

JavaSE基础 --- 类与对象

1.类与对象的定义 类是一种抽象的数据类型&#xff0c;它描述了一类对象的行为和状态。例如&#xff0c;我们可以定义一个名为“Dog”的类&#xff0c;它描述了狗这类动物的一般特性&#xff0c;如颜色、品种等状态&#xff0c;以及跑、叫等行为。 对象则是类的实例&#xff0c…

shell之lsof的用法

shell之lsof的用法 1&#xff09;列出所有打开的文件&#xff1a;lsof。 2&#xff09;查看谁正在使用某个文件&#xff1a;lsof /filepath/file。 3&#xff09;递归查看某个目录的文件信息&#xff1a;lsof D /filepath/filepath2/。 4&#xff09;遍历查看某个目录的所有文件…

Java——接口类和抽象类的方法声明不需要加{}

在Java中&#xff0c;接口类和抽象类的方法声明是不需要加{}的。具体来说&#xff1a; 1. 接口类&#xff08;Interface&#xff09;&#xff1a;接口类定义了一组方法的规范&#xff0c;没有具体的方法实现。在接口中&#xff0c;方法声明只包含方法名、参数列表和返回类型&a…

两分钟搞定MySQL安装——极速mysql5.7安装教程

一、下载mysql mysql官网传送带&#xff1a; MySQL :: Download MySQL Community Server 选择好版本后直接下载即可&#xff0c;版本格式为zip格式。 二、安装mysql 1、解压zip安装包 ps&#xff1a;解压缩的路径里面不要出现中文哦&#xff01; 2、设置配置文件 新建data…

dubbo没有找到生产者

1、没有找到生产者 com.alibaba.dubbo.rpc.RpcException: No provider available from registry 127.0.0.1:2181 for service .... , please check status of providers(disabled, not registered or in blacklist)2、 查看是不是 对应的providers 没有 注册上去 找到 zk 对应…

CSRF攻击(2), 绕过Referer防御

CSRF攻击(2), 绕过Referer防御 一. 场景: 攻击服务器: 192.168.112.202 目标服务器: 192.168.112.200说明: 1. 前端页面的功能是修改密码. 2. 将恶意页面放到202服务器上, 在目标200服务器上访问恶意页面, 目的是绕过200服务器上对CSRF的防御, 修改密码. 二. 后端防御代码: …

解决爬虫在重定向(Redirect)情况下,URL没有变化的方法

重定向是一种网络服务&#xff0c;它可以实现从一个网页跳转到另一个网页的功能。它把用户请求的网页重定向到一个新的位置&#xff0c;而这个位置可以是更新的网页&#xff0c;或最初请求的网页的不同版本。另外&#xff0c;它还可以用来改变用户流量&#xff0c;当用户请求某…

内网穿透Windows下快速搭建个人WEB项目无需服务器

&#x1f4d1;前言 本文主要是windows下内网穿透文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力…

HTML、CSS和JavaScript,实现换肤效果的原理

这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素 还用到HTML5的本地存储技术。 换肤效果的原理&#xff1a;是在选择某种皮肤样式之后&#xff0c;通过JavaScript脚本来加载选中的样式&#xff0c;再通过localStorage存储。 先来回忆…

MYSQL 8.0 配置CDC(binlog)

CDC&#xff08;Change Data Capture&#xff09;即数据变更抓取&#xff0c;通过源端数据源开启CDC&#xff0c;ROMA Connect 可实现数据源的实时数据同步以及物理表的物理删除同步。这里介绍通过开启Binlog模式CDC功能。 注意&#xff1a;1、使用MYSQL8.0及以上版本。 2、不…

剑指JUC原理-9.Java无锁模型

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…

docker 存储目录迁移

参考&#xff1a;【Docker专题】WSL镜像包盘符迁移详细笔记 - 掘金 docker迁移 一 默认目录 Windows版本&#xff08;Windows 10 wsl 2&#xff09;docker 默认程序安装到c盘&#xff0c;数据存放于 C:\Users\当前用户名\AppData\Local\Docker\wsl\data\ext4.vhdx 这样会导致…

延时摄影视频制作工具 LRTimelapse mac中文版特点介绍

lrTimelapse mac是一款适用于 Windows 和 macOS 系统的延时摄影视频制作软件&#xff0c;可以帮助用户创建高质量的延时摄影视频。该软件提供了直观的界面和丰富的功能&#xff0c;支持多种时间轴摄影工具和文件格式&#xff0c;并具有高度的可定制性和扩展性。 lrTimelapse ma…

牛客项目(五)-使用kafka实现发送系统通知

kafka入门以及与spring整合 Message.java import java.util.Date;public class Message {private int id;private int fromId;private int toId;private String conversationId;private String content;private int status;private Date createTime;public int getId() {retur…