Question

我需要从数据库中获取时间后开始倒计时。

例如：您预订了酒店预订，并在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);
};

Answer 1

没关系，除了显示它的代码是错误的。＆＃34;显示＆＃34;未在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) {

这就是全部。

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

1 个答案: