吕滔博客

方案一:

html代码

距离2090年还有
<span class='a'>天</span>
<span class='b'>小时</span>
<span class='c'>分钟</span>
<span class='d'>秒</span>
<script>timeout(3786883200)</script>

JS代码

function timeout(timestamp){
    let timer = setInterval(function() {
        // get today's date
        const today = new Date().getTime();
        // get the difference
        const diff = timestamp * 1000 - today;
        // math
        let days    = Math.floor(diff / (1000 * 60 * 60 * 24));
        let hours   = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
        $('.a').html(days);
        $('.b').html(hours);
        $('.c').html(minutes);
        $('.d').html(seconds);
    }, 1000);
}

方案二:

此方法常用于短信发送倒计时

function resetCode(second, id, title = '', callback){
    var timer = setInterval(function(){
        second -= 1;
        if(second >0 ){
            $('#' + id).html(second + title);
        }else{
            clearInterval(timer);
            callback();
        }
    },1000);
}

使用方法

<span id="second">发送验证码</span >

js代码，按秒、html元素id、文字提示、及到计时结束后显示为重新发送

resetCode(60, 'second', '秒后重新发送', function(){
    $('#second').html('重新发送')
});