倒计时
1.网上找来的一个带停止的demo。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input placeholder="请输入时间" id="inp"> <button onclick="go()">start</button><button onclick="stop()">stop</button><button id="jixu" onclick="jixu()" style="display: none;">continue</button> <div id="result"></div> <script> var time, div=document.getElementById('result'), stopState = false; function go(){ time = document.getElementById('inp').value; timeout(); } function timeout(){ if(time ==''){ alert('请输入时间') return; } setTimeout(function(){ time--; div.innerText = time; if(time!==0 && !stopState){ timeout(); } },1000); } function jixu(){ time = Number(document.getElementById('result').innerText); document.getElementById('jixu').style.display = 'none'; stopState =false; timeout(); } function stop(){ document.getElementById('jixu').style.display = ''; stopState = true; } </script> </body> </html>
2.改造之前的不能中断的代码
//发送验证码 function myCode() { var i = 20,stop; // 倒计时时间 , 是否中断 function time(t) { //中断条件 $(document).on("click",".close-popup",function(){ i=20; stop = true; }) if(i == 0) { t.removeClass('bg-gray'); t.html('重新获取'); i = 20; // 与声明的倒计时时间相同 t.bind('click'); // 时间结束后,再次绑定click事件 } else { var timeWord = i < 10 ? "0" + i : i; t.html(timeWord + 's'); // 显示的倒计时 t.addClass('bg-gray'); t.unbind('click'); // 取消click事件 i--; setTimeout(function() { //状态判断是否递归 if(!stop){ time(t); } }, 1000); } } $(document).on('click', '.getConfirmCode', function(e) { stop = false; var mobile = $(".mobile").val(); if(/^1(3|5|7|8)\d{9}$/.test(mobile)) { if($(e.target).hasClass('bg-gray')) { return false; } else { time($(this)); } // 发送验证码 $.ajax(); } else { showTip("请输入正确的手机号!"); } }) } myCode();