[英]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.