簡體   English   中英

如何在不使用插件的情況下編寫倒數計時器?

[英]How to write a countdown Timer without using a plugin?

使用 jquery 正如您在這張圖片中看到的那樣,但是如何在不使用插件的情況下創建計時器倒計時? 請幫忙

 // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days; // Change the variable here to split it ("days, hours, minutes, seconds" // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);
 <!-- Display the countdown timer in an element --> <p id="demo"></p>

我可以在這里添加什么以便我可以划分一天或其他如圖所示

$('[data-countdown]').each(function(){ var $deadline = new Date($(this).data('countdown')).getTime();

        var $dataDays = $(this).children('[data-days]');
        var $dataHours = $(this).children('[data-hours]');
        var $dataMinuts = $(this).children('[data-minuts]');
        var $dataSeconds = $(this).children('[data-seconds]');

        var x = setInterval(function(){

            var now = new Date().getTime();
            var t = $deadline - now;

            var days = Math.floor(t/(1000*60*60*24));
            var hours = Math.floor(t%(1000*60*60*24) / (1000*60*60));
            var minuts = Math.floor(t%(1000*60*60) / (1000*60));
            var seconds = Math.floor(t%(1000*60) / (1000));

            if( days < 10 ){
                days = '0'+days;
            }

            if( hours < 10 ){
                hours = '0'+hours;
            }

            if( minuts < 10 ){
                minuts = '0'+minuts;
            }

            if( seconds < 10 ){
                seconds = '0'+seconds;
            }

            $dataDays.html(days);
            $dataHours.html(hours);
            $dataMinuts.html(minuts);
            $dataSeconds.html(seconds);


            if( t <= 0 ){
                clearInterval(x);

                $dataDays.html('00');
                $dataHours.html('00');
                $dataMinuts.html('00');
                $dataSeconds.html('00');

            }



        },1000);
    })

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM