JS倒计时计时

Posted 2020-11-03 杰克思勒(Jacksile)

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS倒计时计时相关的知识，希望对你有一定的参考价值。

倒计时

倒计时常用于发送验证码

前端代码如下：

<!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倒计时计时的主要内容，如果未能解决你的问题，请参考以下文章

JUC并发编程共享模式之工具 JUC CountdownLatch（倒计时锁） -- CountdownLatch应用（等待多个线程准备完毕（可以覆盖上次的打印内）等待多个远程调用结束）(代码片段

如何在使用片段和计时器的选项卡式活动上更新 UI

帮忙小小的修改一下JS代码，关于倒计时的。

js倒计时代码还剩多少天

求每天距下班时间倒计时JS代码

Js倒计时代码精确到毫秒。