如何從數據庫獲取時間後開始倒計時？

例如：您已預訂酒店預訂，並在20分鐘後支付。

我的問題在哪裏？

數據庫：

updated_at = 2016-10-11 11:47:58

HTML（框架是laravel 5）：

<input type="hidden" id="updated_at" value="{{ $reserve -> updated_at }}"> 
<div>Reservation closes in <span id="time"></span> minutes!</div>

腳本：

function startTimer(duration, display) { 
    var updated_at = $('#updated_at').val(); 
    console.log(updated_at); 
    var start = Date.now(updated_at), 
      diff, 
      minutes, 
      seconds; 
    function timer() { 
     diff = duration - (((Date.now(updated_at) - start)/1000) | 0); 

     minutes = (diff/60) | 0; 
     seconds = (diff % 60) | 0; 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.textContent = minutes + ":" + seconds; 

     if (diff <= 0) { 
      start = Date.now(updated_at) + 1000; 
     } 
    }; 
    timer(); 
    setInterval(timer, 1000); 
} 

window.onload = function() { 
    var fiveMinutes = 60 * 20, 
      display = document.querySelector('#time'); 
    startTimer(fiveMinutes, display); 
};

來源

2016-10-11 mySun

這很好，但你的代碼，以顯示這是錯誤的。「顯示」沒有在timer函數中定義，僅在onload函數中定義，它不是全局的，因此上下文不會傳遞。您的瀏覽器控制檯中可能存在錯誤，但您沒有提及它。爲了解決：

1）改變

var fiveMinutes = 60 * 20, 
display = document.querySelector('#time');

簡單地

var fiveMinutes = 60 * 20;

2）改變

display.textContent = minutes + ":" + seconds;

到

$("#time").text(minutes + ":" + seconds);

3）變更

startTimer(fiveMinutes, display);

到

startTimer(fiveMinutes);

4）改變

function startTimer(duration, display) {

到

function startTimer(duration) {

而這一切。

來源

2016-10-11 08:19:34 ADyson

非常感謝你，但不工作這段代碼！請檢查這個網站： https://jsfiddle.net/45uLjk1g/1/ – mySun

1）其他語法錯誤：'var fiveMinutes = 60 * 20，'應該是'var fiveMinutes = 60 * 20;'。 2）你沒有將jquery包含在小提琴中。 3）我忘了'display'正在傳遞給定時器功能，所以需要刪除。看到它在這裏工作：https：//jsfiddle.net/45uLjk1g/4/。我已經更新了答案，包括了所有需要的完整步驟。 – ADyson

不，這次是：2016-10-11 11:47:58，而這次要花20分鐘的寬限期。 20分鐘後，該保留期限到期。 – mySun

如何從數據庫獲取時間後開始倒計時？

回答

相關問題