倒计时
倒计时常用于发送验证码
前端代码如下：
<!DOCTYPE html><html><head> ???<title>倒计时、计时</title></head><body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><input type="text" id="phoneId" name="phone" placeholder="填写手机号"><button type="button" id="sendVerifyCodeId" style="height: 46px;">获取验证码</button><script> ???$(document).ready(function() { ???????// 查看js是否被引入 ???????console.log( "JS引入成功" ); ???}); ???// 发送验证码 ???var clock = ""; ???var countDown = 5; // 倒计时采用的秒数，测试可以用5，6这样的小一点的数字，线上一般用60 ???var seconds = countDown; ???var $getVerifyCodeButton; ???$( "#sendVerifyCodeId" ).click(function() { ???????$getVerifyCodeButton = $( this ); ???????var mobile = ?$.trim($( "#phoneId" ).val()); ???????var patPhone = /^1\d{10}$/; ???????if(mobile == "" || !patPhone.test(mobile)) { ???????????// 这里用于校验手机号码是否有误，暂时放空不演示 ???????} ???????$getVerifyCodeButton.attr( "disabled", true ); ???????$getVerifyCodeButton.text("重新获取(" + seconds + "s)"); ???????clock = setInterval(doLoop, 1000); ????}); ???function doLoop() { ???????seconds--; ???????if(seconds > 0) { ???????????$getVerifyCodeButton.text("重新获取(" + seconds + "s)"); ???????} else { ???????????clearInterval(clock); //清除js定时器 ???????????$getVerifyCodeButton.attr( "disabled", false ); ???????????$getVerifyCodeButton.text( "获取验证码") ; ???????????seconds = countDown; //重置时间 ???????} ???}</script></body></html>计时
计时代码可参照倒计时，也可以查看本博客页面中计时源码
效果如下：
JS倒计时、计时
原文地址：https://www.cnblogs.com/tufujie/p/8998991.html