JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒（小时数累加）

最新推荐文章于 2024-08-30 11:39:12 发布

晴小篆

最新推荐文章于 2024-08-30 11:39:12 发布

阅读量4.8k

点赞数

分类专栏：前端文章标签：倒计时精确到时分秒精确到天时分秒

本文链接：https://blog.csdn.net/qq_38355456/article/details/78542803

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现倒计时(天数,时,分,秒)</title>

</head>
<body>

<h2>剩余时间:</h2>
<div id="timer"></div>


<script language="javascript" type="text/javascript">
    timer('2018-11-20 12:00:00','day');

    /**
     * 入参第一个为时间字符串，第二个参数为模式选择，如果传入'day'，按天数倒计时到秒，不传值，按小时精确到秒
     * @param timeStr
     * @param item
     */
    function timer(timeStr,item){
        setInterval(function(){
            let nowTime = new Date(timeStr) - new Date;
            let minutes = parseInt(nowTime / 1000 / 60 % 60, 10);//计算剩余的分钟
            let seconds = parseInt(nowTime / 1000 % 60, 10);//计算剩余的秒数


            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            if(item==='day'){
                let days = parseInt(nowTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
                let hours = parseInt(nowTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
                days = checkTime(days);
                hours = checkTime(hours);
                document.getElementById('timer').innerHTML=days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
            }else{
                let hours = parseInt(nowTime / ( 1000 * 60 * 60), 10); //计算剩余的小时
                hours = checkTime(hours);
                document.getElementById("timer").innerHTML = hours + "小时" + minutes + "分" + seconds + "秒";
            }
        },1000);
    }

    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>
</body>
</html>