2014-09-23 280 views
0

我正在嘗試創建一個倒計時。 基本上我有時間客戶已經下了一個訂單(這是在日期時間格式存儲在數據庫爲例如「2014-08-14 12:52:09」),我也有時間完成訂單(這是在幾小時和幾分鐘「1」45「,或只是幾分鐘」45「)Javascript Countdown

我從網上倒計時的腳本,我有一個糟糕的時間搞清楚如何格式化兩次,以便腳本理解

我得到這個從DB 訂購時間----> 12時52分09秒 到期時間--->45分鐘

到期時間有時可能包括時間,以及未來: 例如:到期時間---> 1小時45分鐘。

劇本我從我包圍的函數內部此刻的網站得到:

JS:

function clockTicking(){ 

// set the date we're counting down to 
    var target_date = new Date("Aug 15, 2019").getTime(); 

    // variables for time units 
    var days, hours, minutes, seconds; 

    // get tag element 


    // update the tag with id "countdown" every 1 second 
    setInterval(function() { 

    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 

    // do some time calculations 
    days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 

    hours = parseInt(seconds_left/3600); 
    seconds_left = seconds_left % 3600; 

    minutes = parseInt(seconds_left/60); 
    seconds = parseInt(seconds_left % 60); 

    // format countdown string + set tag value 
    $('.countdown').html(days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s"); 

    }, 1000); 

} 

任何幫助將不勝感激。

回答

1

您可以在腳本開始改變這種

function setTimer(hours, minutes, dateTime){ 

    var date = new Date(dateTime); 
    date.setHours(date.getHours() + hours); 
    date.setMinutes(date.getMinutes() + minutes); 

    var target_date = date.getTime(); 

    // rest of script 
    } 

然後只是setTimer(1,30, "2014 09 24 00:23")調用它來設置倒計時相對於2014年9月24日01:53

看看這裏:jsFiddle

+0

我不再使用db中的Datetime格式。下訂單時,計算交貨時間並以「小時,分鐘」的格式插入分貝。 – 2014-09-24 00:47:02

+0

Humm,我覺得我感到困惑,我總是需要一段時間來比較,作爲初始點,否則當我刷新頁面時,它總是會假設Now()時間作爲比較點。 – 2014-09-24 00:49:47

+0

我們需要知道客戶下訂單時的日期時間+交貨時間或到期時間,以便能夠完成您想要的任務。 – 2014-09-24 00:53:26

1

我想爲此推薦Moment.js(以及任何類型的日期/時間解析)。儘管編寫自己的函數看起來很誘人,但通常還有很多事情需要考慮,而且這不值得。

使用Moment.js,你想達到什麼可以做這樣的:

function clockTicking(){ 

    var target_date = moment('Aug 15, 2019', 'MMM DD, YYYY'); 
    // update the tag with id "countdown" every 1 second 
    setInterval(function() { 
     var moment_diff = moment.duration(target_date.diff(moment())); 
     // format countdown string + set tag value 
     $('.countdown').html(moment_diff.days() + "d, " + moment_diff.hours() + "h, "+ moment_diff.minutes() + "m, " + moment_diff.seconds() + "s"); 

    }, 1000); 

} 

當然,記住這個特殊的例子是不正確的,因爲相差過大(其只有在差值小於一個月的情況下才能正常工作),但它不應該是一個問題,因爲您在原始文章中提到,差異通常應以小時而非年爲單位來衡量。

+0

我一定會看看Moment.js,謝謝你的提示。 :) – 2014-09-23 22:13:53

1

我真的考慮使用:

http://momentjs.com/docs/

如果你正在做的日期時間相當數量的處理。

但是,它看起來像你有麻煩將您的兩種時間格式轉換爲日期時間對象?

var stripNonNumberics = function(string) { 
    return Number(string.replace(/\D/g, '')); 
    } 

    var target_date = "1hour 45minutes"; // or var target_date = "45minutes"; 
    var split_date = target_date.split(' '); 
    var minutes; 

    // If it has hours 
    if (split_date[1]) { 
    minutes = stripNonNumberics(split_date[1]) + (stripNonNumberics(split_date[0]) * 60); 
    } else { 
    minutes = stripNonNumberics(split_date[0]); 
    } 

    console.log(new Date(new Date().getTime() + minutes*60000);); 
+0

謝謝你:) – 2014-09-23 22:12:44