zoukankan      html  css  js  c++  java
  • 用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

    倒计时——从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>
  • 相关阅读:
    火币Huobi API Websocket
    火币Huobi API
    OKEX API(Websocket)
    OKEX API
    Linux下Miniconda量化环境安装
    Numba:高性能Python编译器
    十进制和十六进制互相转换
    JavaScript 原型和原型链
    Redux 进阶之 react-redux 和 redux-thunk 的应用
    Vue 中 $nextTick() 的应用
  • 原文地址:https://www.cnblogs.com/funseey/p/11397364.html
Copyright © 2011-2022 走看看