倒數計時器 - 想要實現完成通知

我想爲計劃的事件做一個倒數計時器。每件事情都可以，但無法獲得完成時間通知。我的意思是當計時器完成時，它應該有一些定製的HTML而不是像'事件開始'等定時器。倒數計時器 - 想要實現完成通知

在此先感謝。

這裏是我，試圖代碼和小提琴網址：

var target_date = new Date("Jan 30, 2014").getTime(); 

var days, hours, minutes; 
var countdown = document.getElementById("countdown"); 
setInterval(function() { 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 
    days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 
    hours = parseInt(seconds_left/3600 + 14); 
    seconds_left = seconds_left % 3600; 
    minutes = parseInt(seconds_left/60); 
    seconds = parseInt(seconds_left % 60); 

    countdown.innerHTML = days + "<span> Day(s)</span>, " + hours + "<span> Hour(s)</span>, " 
    + minutes + "<span> Min(s)</span>"; 

}, 1000);

來源

2014-01-28 Mufeed Ahmad

一種方法是檢查剩餘的時間。如果days,hours，minutes和second都是0。

var countdownLoop = setInterval(function() { 

    // your calculation here 

    if (seconds < 0) { 
     clearInterval(countdownLoop); 
     countdown.innerHTML = "Event started!"; 
    } else { 
     countdown.innerHTML = days + "<span> Day(s)</span>, " + hours + "<span> Hour(s)</span>, " + minutes + "<span> Min(s)</span>"; 
    } 

}, 1000);

而clearInterval(countdownLoop);停止循環，因爲它不再需要。

來源

2014-01-28 17:13:38 Skwal

仍顯示陰性定時器如果輸入今天的時間...... –

它應該是'第二個<= 0'，我固定我的答案 – Skwal

不工作。 ..你可以PLZ提供小提琴網址..非常感謝 –

你可以添加一個條件，清除間隔，並顯示其他文本：

if (seconds_left <= 0) { clearInterval(0); } 
countdown.innerHTML = 
    seconds_left <= 0 ? "done!" 
        : days + "<span> Day(s)</span>, " + hours + 
         "<span> Hour(s)</span>, " + 
         + minutes + "<span> Min(s)</span>"

但並不是所有的都很好，你的代碼。隨意使用和反覆折騰this jsFiddle

嘗試使用

var target_date = new Date; 
target_date.setSeconds(target_date.getSeconds()+5);

它顯示0 Day(s), 14 Hour(s), 0 Second(s)

的剩餘時間運行它要與你的日期值運行，改變代碼行

timeouttime = new Date('2014/01/30').getTime(), 
// and after initialize 
d.querySelector('#timeout').value = 
    Math.floor((timeouttime - new Date().getTime() )/1000); 
doSet(); 
btn.click();

這裏有一個fork最初的jsfiddle

來源

2014-01-28 17:14:12 KooiInc

，但運作良好..如果沒有點擊並輸入日期和時間已經.. thanksssss –

請參閱編輯的答案。我沒有時間爲你做更多的編碼。拿着jsFiddle和小提琴！還請檢查代碼@ http://testbed.nicon.nl/timing/timer.html – KooiInc

VAR target_date =新的日期（「2014年1月28日」）的的getTime（）。 var days，hours，minutes; var countdown = document.getElementById（「countdown」）;

var interv = setInterval(function() { 
var current_date = new Date().getTime(); 
var seconds_left = (target_date - current_date)/1000; 
days = parseInt(seconds_left/86400); 
seconds_left = seconds_left % 86400; 
hours = parseInt(seconds_left/3600 + 14); 
seconds_left = seconds_left % 3600; 
minutes = parseInt(seconds_left/60); 
seconds = parseInt(seconds_left % 60); 

countdown.innerHTML = days + "<span> Day(s)</span>, " + hours + "<span> Hour(s)</span>, " + minutes + "<span> Min(s)</span>"; 


if ((seconds + minutes + hours + days) <= 0) { 
    clearInterval(interv); 
    myFunc(); 
} 

}, 1000); 

function myFunc() { 
//code 
}

Demo jsfiddle

感謝，

來源

2014-01-28 17:43:32

倒數計時器 - 想要實現完成通知

回答

相關問題