前端事件案例补充
目录
定时器示例
搜索框示例
省市联动
定时器示例
<!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…...
告别FTP龟速：用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件
告别FTP龟速：用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件当面对数百GB的设计素材、日志文件或数据库备份需要迁移时，传统的FTP传输往往会成为效率瓶颈。我曾在一个视频处理项目中，需要将230GB的4K原始素材从移动硬盘导入服务器ÿ…...
【紧急预警】92%的DeepSeek测试用例生成失败源于这4个隐性配置缺陷——资深SDET连夜整理修复清单
更多请点击： https://codechina.net 第一章：DeepSeek测试用例生成的现状与危机本质 当前，DeepSeek系列大模型（如DeepSeek-Coder、DeepSeek-VL）在代码生成与理解任务中展现出强大能力，但其测试用例自动生成…...
2026论文降AI怎么挑？亲测好用工具附免费降AI指南
“您的论文AIGC率为42%，超出学校30%的合格线，请修改后重新提交。”赶毕业论文的同学这段时间估计没少收到这样的提醒。2026年知网、万方、维普等主流平台的AI检测算法持续迭代，把AI生成内容改到符合学校要求，已经成了毕业生的刚需…...
光轮智能 谢晨 访谈总结机器人仿真数据产业
光轮智能 谢晨 访谈总结机器人仿真关于创始人关于数据数据金字塔数据痛点仿真数据的重要性仿真数据的质量b站链接地址公司官网关于创始人 清华物理；哥伦比亚金融；英伟达智驾仿真；小鹏智驾仿真；现为光轮智能CEO 关于数据 数据的…...
Unity UI交互进阶：手把手教你打造一个支持单击、双击、长按的万能按钮组件
Unity UI交互进阶：手把手教你打造一个支持单击、双击、长按的万能按钮组件在游戏开发中，UI交互的流畅性和多样性直接影响玩家的游戏体验。想象一下，当你在开发一个RPG游戏的背包系统时，需要实现道具的单击查看详情、双击快速使用、…...
从游戏引擎到仿真平台：手把手教你用AirSim+UE4搭建你的第一个无人机/自动驾驶仿真环境
从游戏引擎到仿真平台：构建AirSimUE4无人机与自动驾驶仿真环境实战指南当游戏引擎遇上机器人算法测试，会碰撞出怎样的火花？微软开源的AirSim项目将虚幻引擎（Unreal Engine）从游戏开发领域引入到自动驾驶和无人机研究的…...
Codex使用API Key授权无法使用插件？
小伙伴们，大家好，我是小溪，见字如面。对于没有ChatGPT账号的小伙伴来说，虽然可以通过API Key授权的方式使用Codex桌面端，但是会有一些限制。比如无法使用插件功能，无法使用Codex移动端进行远程控制等。为了…...
终极免费音乐解锁工具：打破平台枷锁，让音乐重获自由
终极免费音乐解锁工具：打破平台枷锁，让音乐重获自由 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地…...
BiliBiliCCSubtitle终极指南：5个实战技巧高效下载B站字幕
BiliBiliCCSubtitle终极指南：5个实战技巧高效下载B站字幕 【免费下载链接】BiliBiliCCSubtitle 一个用于下载B站(哔哩哔哩)CC字幕及转换的工具; 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBiliCCSubtitle 还在为无法保存B站视频字幕而烦恼࿱…...
从数据到模型：手把手教你预处理MPIIFaceGaze和EyeDiap数据集（Python实战）
从数据到模型：手把手教你预处理MPIIFaceGaze和EyeDiap数据集（Python实战）当你第一次打开MPIIFaceGaze或EyeDiap数据集的压缩包时，那种面对杂乱文件夹和神秘.mat文件的迷茫感，我太熟悉了。作为计算机视觉工程师…...