用JS实现倒计时(日期字符串作为参数)

Posted 2020-07-07 木西梧

tags:

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现倒计时</title>
    <style>
        *{ margin:0; padding:0; list-style:none;}
        body{ font-size:18px; text-align:center;}
        .time{ height:30px; padding:200px;}
    </style>
</head>
<body>
<div class="time">
    <span id="showInterval"></span>
</div>
<script>

    function getDistanceTime(time,showInterval){
        var endTime= new Date(Date.parse(time.replace(/-/g, "/")));/*replace将时间字符串中所有的\'-\'替换成\'/\',parse将时间格式的字符串转换成毫秒*/
        var nowTime = new Date();
        var distance =endTime.getTime() - nowTime.getTime();/*getTime把一个date对象转换成毫秒*/

        var day = 0;
        var hour = 0;
        var minute = 0;
        var second = 0;

        if(distance >= 0){
            day = Math.floor(distance/1000/60/60/24);
            hour = Math.floor(distance/1000/60/60%24);
            minute = Math.floor(distance/1000/60%60);
            second = Math.floor(distance/1000%60);
        }else{
            alert("目标日期小于当前日期!")
        }

        document.getElementById(showInterval).innerHTML = day + "天" +  hour + "时" + minute + "分" + second + "秒";
    }
//    setInterval(function(){getDistanceTime(\'2016/05/19 12:00:00\',\'showInterval\');},0);
    setInterval(function(){getDistanceTime(\'2017-05-19 12:00:00\',\'showInterval\');},0);
</script>

</body>
</html>

传入的日期参数格式,也可以是\'2017/05/19 12:00:00\'

效果如下:

以上是关于用JS实现倒计时(日期字符串作为参数)的主要内容，如果未能解决你的问题，请参考以下文章