校园网站模板下载,域名买完了网站建设,杭州建站模板系统,成都网站整站优化1、功能描述 当用户想要获取验证码时#xff0c;就点击 免费获取验证码 #xff0c;然后开始倒计时#xff0c;倒计时期间按钮文字为剩余时间x秒#xff0c;且不可按状态#xff0c;倒计时结束后#xff0c;按钮更改为点击重新发送。 2、分析 必须用到定时器。按钮点击后…1、功能描述 当用户想要获取验证码时就点击 免费获取验证码 然后开始倒计时倒计时期间按钮文字为剩余时间x秒且不可按状态倒计时结束后按钮更改为点击重新发送。 2、分析 必须用到定时器。按钮点击后在定时器内做出判断。倒计时60秒到0结束。 3、代码实现 重点介绍定时器在进行下一次倒计时之前一定要清除一下这样的话保证下一次定时器倒计时是正常的。 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{margin: 0;padding: 0;}.send{width:250px;margin:0 auto;}.send input{display: block;width:200px;font:400 16px/30px 微软雅黑;outline: none;border: none;}.send button{height:30px;border: none;outline: none;font:400 16px/30px 微软雅黑;text-align: center;}/stylescript typetext/javascriptwindow.onloadfunction(){var buttondocument.getElementsByTagName(button)[0];button.innerText免费获取验证码;var timernull;button.onclickfunction(){clearInterval(timer);//这句话至关重要var time6;var thatthis;//习惯timersetInterval(function(){console.log(time);if(time0){that.innerText;that.innerText点击重新发送;that.disabledfalse;}else {that.disabledtrue;that.innerText;that.innerText剩余时间(time)秒;time--;}},1000);}}/script/headbodydiv idsendinput typetext namein idin value /button/button/div/body
/html 转载于:https://www.cnblogs.com/sylz/p/5747937.html
