前端事件案例补充
目录
定时器示例
搜索框示例
省市联动
定时器示例
<!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>相关文章：
前端事件案例补充
目录 定时器示例 搜索框示例 省市联动 定时器示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><meta name"viewport" content"widthdevice-width, init…...
3.8 Android eBPF HelloWorld调试（二）
写在前面 我们开发eBPF程序的初衷就是再不改动内核的情况下，将内核监控数据传递给到用户态；像应用进程开发一样开发内核监控程序。 Android开机的时候eBPF程序被加载器加载到内核中，但此时它并没有被附加到内核函数上去，也就是ebpf程序并不会执行，我们可以理解为，它仅仅被…...
xss如何快速提取cookies
<script>alert(111)</script> <img srcx onerroralert(document.cookie)>测试一下baidu的xss <script>alert(111)</script><img srcx οnerrοralert(document.cookie)>...
在 ASP.NET C# 中用Aspose.PDF将 PDF 页面转换为 JPG 图像
PDF 是一种通用格式，通常用于打印和共享文档。 （一）C# PDF to JPG Converter API - 免费下载 Aspose.PDF for .NET是一个强大的 PDF 操作 API，可让您在 .NET 应用程序中创建和处理 PDF 文件。此外，它还允许您将 PDF 文…...
Docker Compose安装milvus向量数据库单机版-milvus基本操作
目录 安装Ubuntu 22.04 LTS在power shell启动milvus容器安装docker desktop下载yaml文件启动milvus容器Milvus管理软件Attu python连接milvus配置下载wget示例导入必要的模块和类与Milvus数据库建立连接创建名为"hello_milvus"的Milvus数据表插入数据创建索引基于向量…...
极致性能优化：前端SSR渲染利器Qwik.js | 京东云技术团队
引言 前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互，而前端框架的选择对于实现这些目标至关重要。然而，传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下，我们引入…...
ES6~ES13新特性（二）
文章目录 一、ES71.Array Includes2.指数exponentiation运算符 二、ES81.Object values2.Object entries3.String Padding4.Trailing Commas5.Object Descriptors 三、ES9四、ES101.flat flatMap2.Object fromEntries3.trimStart、trimEnd4.其他知识点 五、ES111.BigInt2.Nulli…...
soildwork2022怎么样添加螺纹孔？
1.退出草图模式，点击需要添加螺纹孔的物体面，选中“特征”中的“异形孔向导” 2.选中“孔类型”为“直螺纹孔”，“标准”，“类型”，“孔规格”终止条件等。 3.设置完之后选择“位置” 4.鼠标左键在物体面上点一下&…...
【t5 pytorch版源码学习】t5-pegasus-pytorch源码学习
0. 项目来源 中文生成式预训练模型，以mT5为基础架构和初始权重，通过类似PEGASUS的方式进行预训练。 bert4keras版：t5-pegasus pytorch版：t5-pegasus-pytorch 本次主要学习pytorch版的代码解读。 项目结构： train…...
【springboot】spring的Aop结合Redis实现对短信接口的限流
前言 场景: 为了限制短信验证码接口的访问次数，防止被刷，结合Aop和redis根据用户ip对用户限流 1.准备工作 首先我们创建一个 Spring Boot 工程，引入 Web 和 Redis 依赖，同时考虑到接口限流一般是通过注解来标记，而注解…...
【MedusaSTears】怎么禁用edge浏览器截图功能？
版本 Microsoft Edge 版本 119.0.2151.44 (正式版本) (64 位) Ctrl Shift S 竟然是浏览器的截屏? 特么的啥时候多了这么个快捷键? 然后还没办法禁用,真TMD傻哔 edge://settings/accessibility解决方式: 参考资料: 怎么禁用edge浏览器截图功能？ 您好&#x…...
【计算机网络】（谢希仁第八版）第三章课后习题答案
第三章 1.数据链路(即逻辑链路)与链路(即物理链路)有何区别? “电路接通了”与”数据链路接通了”的区别何在? 答：数据链路与链路的区别在于数据链路出链路外，还必须有一些必要的规程来控制数据的传输，因此，数据链路比链路多了…...
批量异步任务处理
当我们在项目中遇到很多业务同时处理，如果是串行肯定是影响性能的，这时候就需要异步执行了，说道异步肯定就有很多方案了 方案一： 比如使用spring的异步注解，比如下面的代码,每个方法上面都是异步注解，当时…...
宜昌市公安局、点军区政府与中科升哲达成战略合作，共建视频图像联合创新实验室
11月3日，宜昌视频图像联合创新战略合作签约仪式在宜昌市公安局举行。 宜昌市副市长、市公安局党委书记、局长上官福令，市公安局党委副书记、副局长龚海波，宜昌市点军区委书记万红，点军区委副书记、区长黄文云，升哲科技…...
java版小程序商城免费搭建-直播商城平台规划及常见的营销模式有哪些？电商源码/小程序/三级分销
1. 涉及平台 平台管理、商家端（PC端、手机端）、买家平台（H5/公众号、小程序、APP端（IOS/Android）、微服务平台（业务服务） 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…...
Linux下yum源配置实战
一、Linux下软件包的管理 1、软件安装方式 ① RPM包管理（需要单独解决依赖问题） ② YUM包管理（需要有网络及YUM仓库的支持，会自动从互联网下载软件，自动解决依赖） ③ 源码安装（安装过程比较…...
, JSONP劫持)
JSONP 跨域访问(2), JSONP劫持
JSONP 跨域访问(2), JSONP劫持 一, 利用 XSS 漏洞执行jsonp 1. 利用过程 发现有jsonp的请求: <script type"text/javascript" src"http://192.168.112.200/security/jsonp.php?callbackjsonpCallback"></script>向xss漏洞的位置注入代码…...
【java】实现自定义注解校验——方法一
自定义注解校验的实现步骤： 1.创建注解类，编写校验注解，即类似NotEmpty注解 2.编写自定义校验的逻辑实体类，编写具体的校验逻辑。(这个类可以实现ConstraintValidator这个接口，让注解用来校验) 3.开启使用自定义注解进…...
JavaScript基础入门03
目录 1.条件语句 1.1if 语句 1.1.1基本语法格式 1.1.2练习案例 1.2三元表达式 1.3switch 2.循环语句 2.1while 循环 2.2continue 2.3break 2.4for 循环 3.数组 3.1创建数组 3.2获取数组元素 3.3新增数组元素 3.3.1. 通过修改 length 新增 3.3.2. 通过下标新增 …...
P1903 [国家集训队] 数颜色 / 维护队列
带修改的莫队 带修改的莫队就是在基础莫队的基础上增加了一维属性，之前只需要维护l，r现在还需要维护一下时间t，排序还是先按照左端点块儿号排序，然后右端点块儿号排序，最后按时间排序。其它的都是差不多的。 #include…...
Wii Nunchuk嵌入式驱动库：I²C协议解析与跨平台适配
1. WiiChuck库概述：面向嵌入式系统的Wii Nunchuk通用适配框架WiiChuck是一个专为嵌入式平台设计的Wii Nunchuk（任天堂Wiimote扩展手柄）通用驱动库，其核心定位是提供跨平台、可裁剪、高可靠性的IC通信接口抽象层。该库并非简单封装…...
从0到1：Fugu14完美越狱工具实战指南
从0到1：Fugu14完美越狱工具实战指南 【免费下载链接】Fugu14 Fugu14 is an untethered iOS 14.3-14.5.1 jailbreak 项目地址: https://gitcode.com/gh_mirrors/fu/Fugu14 iOS 14.3-14.5.1设备如何突破系统限制？Fugu14作为一款强大的完美越狱工具&…...
TypeScript——tsconfig.json
tsconfig.json1、使用配置文件1.1、自动搜索配置文件1.2、指定配置文件2、编译选项列表3、编译文件列表3.1、--listFiles编译选项3.2、 默认编译文件列表3.3、files属性3.4、include属性3.5、 exclude属性4、声明文件列表4.1、--typeRoots编译选项4.2、--types编译选项5、继承…...
三极管倍频 vs 锁相环倍频：短波通信场景下的5个关键性能对比实验
三极管倍频与锁相环倍频在短波通信中的5组实测性能对决 短波通信系统的核心挑战之一在于如何生成高稳定度的射频信号。当工程师需要在有限频谱资源中实现高效传输时，频率合成技术的选择往往决定了系统整体性能。本文将基于实际测试平台，对比分析三极管倍…...
3步实现Axure RP本地化界面优化：开源工具助力中文设计环境构建
3步实现Axure RP本地化界面优化：开源工具助力中文设计环境构建 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包，不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-c…...
规则直观落地操作指南（零理解成本・照做就生效・效果肉眼可见）
规则直观落地操作指南（零理解成本・照做就生效・效果肉眼可见） 核心原则：所有内容全是「动作指令」，无概念、无术语、无废话；每一步操作都有「即时可验证的落地效果」，不用等项目结束，做完立刻知道有没有用。 一、先锁死 3 条零理解成本操作铁律（必须先遵守，否则所有…...
Bili2Text：B站视频转文字的智能革命
Bili2Text：B站视频转文字的智能革命 【免费下载链接】bili2text Bilibili视频转文字，一步到位，输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 副标题：还在为视频笔记熬夜？这款工具让…...
matlab程序，傅里叶变换，频域数据，补零与不补零傅里叶变换
软件复制到浏览器下载：https://wwb.lanzouw.com/b02cila0j密码:cv10在导入数据前需明确是否勾选“加速度数据尾部补0,长度变为2的n次方”，如果输入数据点数是2 的整数倍，则可以直接使用 FFT 算法进行快速傅里叶变换，计算效率和变换…...
Shell脚本一键部署Kubenetes（k8s）前置环境
1. 服务器环境[rootlocalhost~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core)2. 脚本内容#!/bin/bash#本文针对CentOS7系统#1）关闭交换分区swap disable_swap(){echo -e "\e[32m1）开始关闭swap\e[0m"#备份fstabsudo cp /e…...
Nextcloud Android文件同步革命：实现跨设备无缝数据访问的完整指南 [特殊字符]
Nextcloud Android文件同步革命：实现跨设备无缝数据访问的完整指南 📱 【免费下载链接】android 📱 Nextcloud Android app 项目地址: https://gitcode.com/gh_mirrors/andr/android Nextcloud Android应用是一款功能强大的开源云存储…...