前端事件案例补充
目录
定时器示例
搜索框示例
省市联动
定时器示例
<!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 跨域访问(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…...
uniapp 请求接口的方式
在UniApp中，我们可以使用多种方式来发送请求接口。以下是几种常用的方式： 1、使用unmireuest方法:uni.reuest是uniApp提供的原生AP，可以发送HTTP请，我们可以通过传递一个图对象来设置请求的参数，RL、请求方法GET/POST…...
怎么查看当前vue项目，要求的node.js版本
要查看当前 Vue 项目所需的 Node.js 版本，你可以查看项目根目录下的 package.json 文件中的 engines 属性。该属性定义了项目所需的 Node.js 版本范围。 例如，以下是一个示例 package.json 文件： {"name": "my-vue-project&…...
QT5自适应
//集成屏幕自适应功能 QApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QCoreApplication::setAttribute(Qt::AA_UseHighDpiPixmaps); DEVMODE NewDevMode; //获取屏幕设置中的分辨率 EnumDisplaySettings(0, ENUM_CURRENT_SETTINGS, &NewDevMo…...
蓝桥杯官网练习题（日期问题）
题目描述 小明正在整理一批历史文献。这些历史文献中出现了很多日期。小明知道这些日期都在 1960 年 1 月 1 日至 2059 年 12 月 31 日。令小明头疼的是，这些日期采用的格式非常不统一，有采用年/月/日的，有采用月/日/年的，还有采…...
PDF文件解析
一、PDF文件介绍 PDF是英文Portable Document Format缩写，就是可移植的意思，它是以PostScript语言图象模型为基础，无论在哪种打印机上都可保证精确的颜色和准确的打印效果，PostScript咱也不懂，估计和SVG的原理差不多吧…...
初识微服务技术栈
认识微服务 随着互联网行业的发展，对服务的要求也越来越高，服务架构也从单体架构逐渐演变为现在流行的微服务架构，这些架构之间有怎样的差别呢？ 导学： 了解微服务的优缺点；了解微服务架构的演变过程&am…...
windows 下运行正常，但是linux下报错 ： Could not find or load main class
使用指令 "sed -i s/\r$// xxxxxxx.sh"，将 .sh 文件中的 "\r" 全部替换成空白符，即可解决问题 转转：https://www.cnblogs.com/cmxbky1314/p/12096611.html...
MySQL 数据目录和 InnoDB 表空间补充知识：详细结构
1. 数据目录 在Ubuntu下，MySQL的数据目录为/var/lib/mysql 1.1 数据库在文件系统中的表示 （1）创建数据库时，会在数据目录下创建一个与数据库名同名的子目录。（除了information_schema这个系统数据外） &…...
移远EC600U-CN开发板 day02
1.QuecPythonLVGL显示图片 由于官方提供的显示图片函数使用失败，为了能在屏幕上显示图片，通过对出厂脚本的分析，成功使用LVGL显示图片 (1)代码 import lvgl as lv from tp import gt9xx from machine import LCD from machine import Pin …...
visual studio Python 配置QGIS（qgis）教程
visual studio Python 配置QGIS（qgis）教程 这个教程全网独一份啊，博主是自己摸索出来的。 visual studio Python 配置QGIS（qgis）环境一共分为两部： 第一步安装QGIS： 下载链接如下 https://www…...