jQuery實現倒計時功能

jopen 9年前發布 | 5K 次閱讀 JavaScript jQuery

定義和用法

    setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

    setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。


下面舉例

<html>
    <head>
        <meta charset="utf-8">
        <title>jquery簡單倒計時</title>
        </style>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">



        var intDiff = parseInt(60);//倒計時總秒數量

        function timer(intDiff) {
            window.setInterval(function() {
                var day = 0,
                        hour = 0,
                        minute = 0,
                        second = 0;//時間默認值        
                if (intDiff > 0) {
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (minute <= 9)
                    minute = '0' + minute;
                if (second <= 9)
                    second = '0' + second;
                $('#day_show').html(day + "天");
                $('#hour_show').html('<s id="h"></s>' + hour + '時');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                intDiff--;
            }, 1000);
        }

        $(function() {
            timer(intDiff);
        });
    </script>
</head>
<body>
    <h1>網頁上的倒計時</h1>
    <div class="time-item">
        <span id="day_show">0天</span>
        <strong id="hour_show">0時</strong>
        <strong id="minute_show">0分</strong>
        <strong id="second_show">0秒</strong>
    </div>
    <!--倒計時模塊-->
</body>



</html></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！