倒计时

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();

　　

posted @ 2018-01-30 15:09  橙云生  阅读(179)  评论(0)    收藏  举报