js倒计时--天时分秒, 到时间后自动停止

Posted 秋天1014童话

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js倒计时--天时分秒, 到时间后自动停止相关的知识,希望对你有一定的参考价值。

js倒计时–天、时、分、秒, 到时间后自动停止:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>积分清零公告</title>
    <script language="javascript" type="text/javascript">  
        var timer = null;
        function leftTimer(date) 
            clearTimeout(timer);
            var leftTime = new Date(date).getTime() - new Date().getTime(); //计算剩余的毫秒数 
            if (leftTime <= 0) leftTime = 0;
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
            var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
            days = paddingZero(days);
            hours = paddingZero(hours);
            minutes = paddingZero(minutes);
            seconds = paddingZero(seconds);
            document.getElementById("timer").innerHTML = `$days天 $hours:$minutes:$seconds`;

            if (leftTime >= 0) 
                timer = setTimeout(`leftTimer('$date')`, 1000);
            
        
        function paddingZero(i)  //将0-9的数字前面加上0,例1变为01 
            return i < 10 ? "0" + i : i;
        

    </script>
</head>

<body onload="leftTimer('2018/10/31 15:53:50')">
    <h2>剩余时间:</h2>
    <div id="timer"></div>
</body>

</html>

以上是关于js倒计时--天时分秒, 到时间后自动停止的主要内容,如果未能解决你的问题,请参考以下文章

JS倒计时——天时分秒

PHP函数gmstrftime()将秒数转换成天时分秒

javascript - 活动倒计时(天时分秒)

活动倒计时-天时分秒(兼容ios,定时器的使用以及其注意事项)

vue 3.0项目天时分秒倒记计时功能

JS倒计时效果