js案例100讲解（javaScript常用案例）
导读：案例1：点击按钮弹出弹框 <body>...
案例1：点击按钮弹出弹框
<body> <button id="btn">唐伯虎</button> <script> // 点击一个按钮 ，弹出对话框 //(1) 事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById(btn); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert(点秋香); } </script> </body>案例2：点击按钮控制台输出内容
<body> <div>点我呀</div> <script> // 点击div 控制台输出 我被选中了 // 获取事件源 var div = document.querySelector(div); // 注册事件 ，添加事件处理程序 div.onclick = function() { console.log(小样儿 ，还真敢点); } </script> </body>案例3：点击按钮显示当前时间
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div, p { width: 300px; height: 30px; line-height: 30px; color: #fff; background-color: pink; } </style> </head> <body> <button>显示当前系统时间</button> <div>某个时间</div> <p>1123</p> <script> // 当我们点击了按钮 ， div里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector(button); var div = document.querySelector(div); // 2.注册事件 btn.onclick = function() { // div.innerText = 2019-6-6; div.innerHTML = getDate(); } function getDate() { var date = new Date(); // 我们写一个 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]; var day = date.getDay(); return 今天是： + year + 年 + month + 月 + dates + 日 + arr[day]; } // 我们元素可以不用添加事件 var p = document.querySelector(p); p.innerHTML = getDate(); </script> </body>案例4：点击按钮切换图片
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 300px; } </style> </head> <body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <br> <img src="images/ldh.jpg" alt="" title="刘德华"> <script> // 修改元素属性 src // 1. 获取元素 var ldh = document.getElementById(ldh); var zxy = document.getElementById(zxy); var img = document.querySelector(img); // 2. 注册事件 处理程序 zxy.onclick = function() { img.src = images/zxy.jpg; img.title = 张学友; } ldh.onclick = function() { img.src = images/ldh.jpg; img.title = 刘德华; } </script> </body>案例5：分时间问候显示不同图片
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 300px; } </style> </head> <body> <img src="images/s.gif" alt=""> <div>上午好</div> <script> // 根据系统不同时间来判断 ，所以需要用到日期内置对象 // 利用多分支语句来设置不同的图片 // 需要一个图片 ，并且根据时间修改图片 ，就需要用到操作元素src属性 // 需要一个div元素 ，显示不同问候语 ，修改元素内容即可 // 1.获取元素 var img = document.querySelector(img); var div = document.querySelector(div); // 2. 得到当前的小时数 var date = new Date(); var h = date.getHours(); // 3. 判断小时数改变图片和文字信息 if (h < 12) { img.src = images/s.gif; div.innerHTML = 亲 ，上午好 ，好好写代码; } else if (h < 18) { img.src = images/x.gif; div.innerHTML = 亲 ，下午好 ，好好写代码; } else { img.src = images/w.gif; div.innerHTML = 亲 ，晚上好 ，好好写代码; } </script> </body>案例6：隐藏密码功能
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 2px; right: 2px; width: 24px; } </style> </head> <body> <div class="box"> <label for=""> <img src="images/close.png" alt="" id="eye"> </label> <input type="password" name="" id="pwd"> </div> <script> // 1. 获取元素 var eye = document.getElementById(eye); var pwd = document.getElementById(pwd); // 2. 注册事件 处理程序 var flag = 0; eye.onclick = function() { // 点击一次之后 ， flag 一定要变化 if (flag == 0) { pwd.type = text; eye.src = images/open.png; flag = 1; // 赋值操作 } else { pwd.type = password; eye.src = images/close.png; flag = 0; } } </script> </body>案例7：关闭淘宝二维码
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px auto; font-size: 12px; text-align: center; color: #f40; /* display: block; */ } .box img { width: 60px; margin-top: 5px; } .close-btn { position: absolute; top: -1px; left: -16px; width: 14px; height: 14px; border: 1px solid #ccc; line-height: 14px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; } </style> </head> <body> <div class="box"> 淘宝二维码 <img src="images/tao.png" alt=""> <!-- 关闭按钮 --> <i class="close-btn">×</i> </div> <script> // 1. 获取元素 var btn = document.querySelector(.close-btn); var box = document.querySelector(.box); // 2.注册事件 程序处理 btn.onclick = function() { box.style.display = none; } </script> </body>案例8：循环精灵图
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background: url(images/sprite.png) no-repeat; } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> // 1. 获取元素 所有的小li var lis = document.querySelectorAll(li); for (var i = 0; i < lis.length; i++) { // 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标 var index = i * 44; lis[i].style.backgroundPosition = 0 - + index + px; } </script> </body>案例9：显示隐藏文本框
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机"> <script> // 1.获取元素 var text = document.querySelector(input); // 2.注册事件 获得焦点事件 onfocus text.onfocus = function() { // console.log(得到了焦点); if (this.value === 手机) { this.value = ; } // 获得焦点需要把文本框里面的文字颜色变黑 this.style.color = #333; } // 3. 注册事件 失去焦点事件 onblur text.onblur = function() { // console.log(失去了焦点); if (this.value === ) { this.value = 手机; } // 失去焦点需要把文本框里面的文字颜色变浅色 this.style.color = #999; } </script> </body>案例10：仿新浪 ，注册登录界面
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/wrong.png); } .right { color: green; background-image: url(images/right.png); } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> // 首先判断的事件是表单失去焦点 onblur // 如果输入正确则提示正确的信息颜色为绿色小图标变化 // 如果输入不是6到16位 ，则提示错误信息颜色为红色 小图标变化 // 因为里面变化样式较多 ，我们采取className修改样式 // 1.获取元素 // 获取表单 var ipt = document.querySelector(.ipt); // 获取提示信息 var message = document.querySelector(.message); //2. 注册事件 失去焦点 ipt.onblur = function() { // 根据表单里面值的长度 ipt.value.length if (this.value.length < 6 || this.value.length > 16) { console.log(错误); message.className = message wrong; message.innerHTML = 您输入的位数不对要求6~16位; } else { message.className = message right; message.innerHTML = 您输入的正确; } } </script> </body>案例11：排他思想：点击按钮切换背景颜色：排除其他元素 ，仅给一个元素添加样式
首先将所有元素样式清空 ，再设置单个元素
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName(button); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = pink; } } //2. 首先先排除其他人 ，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 </script> </body>案例12：百度换肤效果：点击图片将背景切换与图片相同
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> </head> <body> <ul class="baidu"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> <script> // 1. 获取元素 var imgs = document.querySelector(.baidu).querySelectorAll(img); // console.log(imgs); // 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { // this.src 就是我们点击图片的路径 images/2.jpg // console.log(this.src); // 把这个路径 this.src 给body 就可以了 document.body.style.backgroundImage = url( + this.src + ); } } </script> </body>案例13：表格隔行变色效果
用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout 核心思路：鼠标经过 tr 行 ，当前的行变背景颜色 ， 鼠标离开去掉当前的背景颜色 注意： 第一行（thead里面的行）不需要变换颜色 ，因此我们获取的是 tbody 里面的行 <head> <style> .bg { background-color: pink; } </style> </head> <body> </table> <script> // 1.获取元素 获取的是 tbody 里面所有的行 var trs = document.querySelector(tbody).querySelectorAll(tr); // 2. 利用循环绑定注册事件 for (var i = 0; i < trs.length; i++) { // 3. 鼠标经过事件 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = bg; } // 4. 鼠标离开事件 onmouseout trs[i].onmouseout = function() { this.className = ; } } </script> </body>案例14：全选 ，反选
全选和取消全选做法
： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
下面复选框需要全部选中 ， 上面全选才能选中做法： 给下面所有复选框绑定点击事件 ，每次点击 ，都要循环查看下面所有的复选框是否有没选中的 ，如果有一个没选中的 ， 上面全选就不选中 。
可以设置一个变量 ，来控制全选是否选中 <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById(j_cbAll); // 全选按钮 var j_tbs = document.getElementById(j_tb).getElementsByTagName(input); // 下面所有的复选框 // 注册事件 j_cbAll.onclick = function() { // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中 ，如果是false 就是未选中 console.log(this.checked); for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 2. 下面复选框需要全部选中 ， 上面全选才能选中做法： 给下面所有复选框绑定点击事件 ，每次点击 ，都要循环查看下面所有的复选框是否有没选中的 ，如果有一个没选中的 ， 上面全选就不选中 。 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function() { // flag 控制全选按钮是否选中 var flag = true; // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中,有一个未选中就是false for (var i = 0; i < j_tbs.length; i++) { if (!j_tbs[i].checked) { flag = false; break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中 ，剩下的就无需循环判断了 } } j_cbAll.checked = flag; } } </script>案例15：tab栏切换
<body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> // 获取元素 var tab_list = document.querySelector(.tab_list); var lis = tab_list.querySelectorAll(li); var items = document.querySelectorAll(.item); // for循环绑定点击事件 for (var i = 0; i < lis.length; i++) { // 开始给5个小li 设置索引号 lis[i].setAttribute(index, i); lis[i].onclick = function() { // 1. 上的模块选项卡 ，点击某一个 ，当前这一个底色会是红色 ，其余不变（排他思想） 修改类名的方式 // 干掉所有人 其余的li清除 class 这个类 for (var i = 0; i < lis.length; i++) { lis[i].className = ; } // 留下我自己 this.className = current; // 2. 下面的显示内容模块 var index = this.getAttribute(index); console.log(index); // 干掉所有人 让其余的item 这些div 隐藏 for (var i = 0; i < items.length; i++) { items[i].style.display = none; } // 留下我自己 让对应的item 显示出来 items[index].style.display = block; } } </script> </body>案例16：新浪下拉菜单
<body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> // 1. 获取元素 var nav = document.querySelector(.nav); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = block; } lis[i].onmouseout = function() { this.children[1].style.display = none; } } </script> </body>案例17：留言添加操作
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector(button); var text = document.querySelector(textarea); var ul = document.querySelector(ul); // 2. 注册事件 btn.onclick = function() { if (text.value == ) { alert(您没有输入内容); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement(li); // 先有li 才能赋值 //留言显示相应内容 li.innerHTML = text.value; // (2) 添加元素 // ul.appendChild(li); //最新的留言置顶 ul.insertBefore(li, ul.children[0]); } } </script> </body>案例18：留言删除操作
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector(button); var text = document.querySelector(textarea); var ul = document.querySelector(ul); // 2. 注册事件 btn.onclick = function() { if (text.value == ) { alert(您没有输入内容); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement(li); // 先有li 才能赋值 li.innerHTML = text.value + "<a href=javascript:;>删除</a>"; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll(a); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode; ul.removeChild(this.parentNode); } } } } </script> </body>案例19：动态生成表格
<body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 1.先去准备好学生的数据 var datas = [{ name: 魏璎珞, subject: JavaScript, score: 100 }, { name: 弘历, subject: JavaScript, score: 98 }, { name: 傅恒, subject: JavaScript, score: 99 }, { name: 明玉, subject: JavaScript, score: 88 }, { name: 大猪蹄子, subject: JavaScript, score: 0 }]; // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行 var tbody = document.querySelector(tbody); for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr // 1. 创建 tr行 var tr = document.createElement(tr); tbody.appendChild(tr); // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i] for (var k in datas[i]) { // 里面的for循环管列 td // 创建单元格 var td = document.createElement(td); // 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]); td.innerHTML = datas[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement(td); td.innerHTML = <a href="javascript:;">删除 </a>; tr.appendChild(td); } // 4. 删除操作 开始 var as = document.querySelectorAll(a); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } // for(var k in obj) { // k 得到的是属性名 // obj[k] 得到是属性值 // } </script> </body>案例20：模拟京东按键输入内容
<body> <input type="text"> <script> // 核心思路： 检测用户是否按下了s 键 ，如果按下s 键 ，就把光标定位到搜索框里面 // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 // 搜索框获得焦点： 使用 js 里面的 focus() 方法 var search = document.querySelector(input); document.addEventListener(keyup, function(e) { // console.log(e.keyCode); if (e.keyCode === 83) { search.focus(); } }) </script> </body>案例21：模拟京东快递单号查询案例
keydown和keypress在文本框里面的特点：他们两个事件触发的时候 ，文字还没有落入文本框中 。
快递单号输入内容时 ， 上面的大号字体盒子（con）显示(这里面的文字 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 如果快递单号里面内容为空 ，则隐藏大号字体盒子(con)盒子 注意： keydown 和 keypress 在文本框里面的特点： 他们两个事件触发的时候 ，文字还没有落入文本框中 。 keyup事件触发的时候 ， 文字已经落入文本框里面了 当我们失去焦点 ，就隐藏这个con盒子 当我们获得焦点 ，并且文本框内容不为空 ，就显示这个con盒子 <body> <div class="search"> <div class="con">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> // 快递单号输入内容时 ， 上面的大号字体盒子（con）显示(这里面的字号更大） // 表单检测用户输入： 给表单添加键盘事件 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 // 如果快递单号里面内容为空 ，则隐藏大号字体盒子(con)盒子 var con = document.querySelector(.con); var jd_input = document.querySelector(.jd); jd_input.addEventListener(keyup, function() { // console.log(输入内容啦); if (this.value == ) { con.style.display = none; } else { con.style.display = block; con.innerText = this.value; } }) // 当我们失去焦点 ，就隐藏这个con盒子 jd_input.addEventListener(blur, function() { con.style.display = none; }) // 当我们获得焦点 ，就显示这个con盒子 jd_input.addEventListener(focus, function() { if (this.value !== ) { con.style.display = block; } }) </script> </body>案例22：倒计时效果
这个倒计时是不断变化的 ，因此需要定时器来自动变化（setInterval） 三个黑色盒子里面分别存放时分秒 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数 第一次执行也是间隔毫秒数 ，因此刚刷新页面会有空白 最好采取封装函数的方式 ， 这样可以先调用一次这个函数 ，防止刚开始刷新页面有空白问题 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style> </head> <body> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> // 1. 获取元素 var hour = document.querySelector(.hour); // 小时的黑色盒子 var minute = document.querySelector(.minute); // 分钟的黑色盒子 var second = document.querySelector(.second); // 秒数的黑色盒子 var inputTime = +new Date(2019-5-1 18:00:00); // 返回的是用户输入时间总的毫秒数 countDown(); // 我们先调用一次这个函数 ，防止第一次刷新页面有空白 // 2. 开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? 0 + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? 0 + m : m; minute.innerHTML = m; var s = parseInt(times % 60); // 当前的秒 s = s < 10 ? 0 + s : s; second.innerHTML = s; } </script> </body>案例23：发送短信案例
<body> 手机号码： <input type="number"> <button>发送</button> <script> // 按钮点击之后 ，会禁用 disabled 为true // 同时按钮里面的内容会变化 ， 注意 button 里面的内容通过 innerHTML修改 // 里面秒数是有变化的 ，因此需要用到定时器 // 定义一个变量 ，在定时器里面 ，不断递减 // 如果变量为0 说明到了时间 ，我们需要停止定时器 ，并且复原按钮初始状态 var btn = document.querySelector(button); var time = 3; // 定义剩下的秒数 btn.addEventListener(click, function() { btn.disabled = true; //禁用 var timer = setInterval(function() { if (time == 0) { // 清除定时器和复原按钮 clearInterval(timer); btn.disabled = false; btn.innerHTML = 发送; } else { btn.innerHTML = 还剩下 + time + 秒; time--; } }, 1000); }) </script> </body>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！