码迷,mamicode.com
首页 > 编程语言 > 详细

用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

时间:2019-08-23 00:05:27      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:倒计时   javascrip   document   function   mda   func   ali   window   onclick   

倒计时——从10倒数到0,点击按钮会还原倒计时
<body>
    <!-- 将textvalue值设为10,从10倒数 -->
    <input type="text" value="10" id="txt">
    <input type="button" value="重新开始" id="btn">
</body>
<script>
    var oT = document.getElementById("txt");
    var oB = document.getElementById("btn");
    var timer;
    //封装一个开始倒数的函数
    function start(){
        //开启计时器,每秒text框中的数值自减1
        timer = setInterval(function(){
            oT.value--;
            //当text框中的数值为0时,停止计时器
            if(oT.value<=0){
                clearInterval(timer);
            }
        },1000)
    }
    //封装一个清楚延时器的函数
    function stop(){
        clearTimeout(timer);
    }
    //当网页加载完毕时的行为如下
    window.onload = function(){
        //只要text里面的数值还未到0,则不停地以每秒减一的速度进行着
        if(oT.value>0){
            start();
        //一旦清零,就停止
        }else{
            stop();
        }
    }
    //当点击按钮时的行为
    oB.onclick = function(){
        //此处要设清除计时器,否则中断text倒数后的重新倒数将会加速,甚至会递减到负值
        clearInterval(timer);
        //点击按钮后,无论text中的数值时多少,都变为10
        oT.value = 10;
        //重复上面函数的行为
        if(oT.value>0){
            start();

        }else{
            stop();
        }
    }
</script>

 

用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

标签:倒计时   javascrip   document   function   mda   func   ali   window   onclick   

原文地址:https://www.cnblogs.com/funseey/p/11397364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!