用JS實現倒計時(日期字符串作為參數)

本文轉載自查看原文 2016-05-18 11:13 4494 JavaScript

<!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'

效果如下:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js——倒計時實現微信小程序中利用時間選擇器和js無計算實現定時器（將字符串或秒數轉換成倒計時） js / vue 實現倒計時 js簡單實現倒計時的方法 js實現倒計時函數 js實現倒計時功能 js實現考試倒計時 js實現倒計時效果 js實現倒計時（分:秒） js 實現網頁顯示倒計時