如何从数据库获取时间后开始倒计时？

例如：您已预订酒店预订，并在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

如何从数据库获取时间后开始倒计时？

回答

相关问题