深圳那个网站建设,大连微信网站建设,建设科技网络网站的意义和目的,邯郸建立网站费用!DOCTYPE html
html langen
!-- 案例分析#xff1a;
1. 按钮点击之后#xff0c;会变成禁用状态(disabled为ture)
2. 同时按钮里面的内容会变化,button里面的内容通过innerHTML修改
3. 按钮中的秒数发生变化#xff0c;因此需要用到定时器…!DOCTYPE html
html langen
!-- 案例分析
1. 按钮点击之后会变成禁用状态(disabled为ture)
2. 同时按钮里面的内容会变化,button里面的内容通过innerHTML修改
3. 按钮中的秒数发生变化因此需要用到定时器
4. 定义一个变量在定时器里面不断递减
5. 如果变量为0说明到了时间需要停止定时器并且复原按钮初始状态 --headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}span {font-size: 10px;}input {width: 130px;height: 15px;margin-left: 20px;font-size: 10px;color: #999;}button {width: 80px;font-size: 10px;}/style
/headbodyinput typetext placeholder请输入手机号 idtelebutton获取验证码/buttonscript// 获取元素var input document.querySelector(#tele);var btn document.querySelector(button);// 注册事件input.addEventListener(focus, function () {this.style.color #000;})var time 60; // 定义剩余秒数btn.addEventListener(click, function () {var tele input.value;if (tele.length ! 11) { //判断输入框内容的长度是否为11位input.value 手机号输入有误; //如果输入有误则输入框以红色文本提示错误input.style.color #ff0000;setTimeout(function () { // 设置定时器在给出输入错误的提示1s后恢复原始输入状态input.value tele;input.style.color #000;}, 1000)} else {this.disabled true; // 手机号输入正确则按钮变为禁用状态并设置定时器var timer setInterval(function () {if (time 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled false;btn.innerHTML 获取验证码;time 60; // 每次点击都需要重新开始计时} else {btn.innerHTML 剩余 time 秒;time--;}}, 1000);}})/script
/body/html
