Question

我创建了一个倒数计时器，它在html中显示计时器。

我还将它显示在警告框中。

我的问题是我只想让用户第一次访问网站时显示提示框，这样就不会在每个新网页上显示。

我也遇到了这样的问题：警报框会暂停时间，直到您点击好，这会使时间落后几秒，具体取决于用户点击的速度。

我的代码如下。

function startTimer(display) {
var date = new Date();
var h17 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 17);
if(date.getHours() >= 17) {
    h17.setDate(h17.getDate()+1);
}
h17 = h17.getTime();
var diff,
    hours,
    minutes,
    seconds;

function timer() {
    diff = (((h17 - Date.now()) / 1000) | 0);

    // Setting and displaying hours, minutes, seconds
    hours = (diff / 3600) | 0;
    minutes = ((diff % 3600) / 60) | 0;
    seconds = (diff % 60) | 0;

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

    display.textContent = hours + ":" + minutes + ":" + seconds;
};
timer();
setInterval(timer, 1000);
}
window.onload = function () {
    var display = document.querySelector('#time');
    startTimer(display);
    alert(display.textContent);
};

下面的HTML：

<div> time left <span id="time"></span> </div>

Answer 1

您可以使用JavaScript中的对话框（例如dialog

），而不是使用提醒框

要使用它，您需要在文档中添加jQuery和jQuery UI。然后，您可以使用以下代码初始化窗口小部件：

//When the dom is ready
$(function() {
    //This variable contains the countdown interval
    var countdown;

    //Initialization of the widget
    $( "#dialog" ).dialog({
        open: function( event, ui ) {
            //When the dialog is open we start the countdown
            countdown = startTimer($(this).find('#time')[0])
        },
        close: function( event, ui ) {
            //When the dialog is closed we stop the countdown
            clearInterval(countdown);
        }
    });
});

请勿忘记在return上添加setInterval以进行倒计时：

return setInterval(timer, 1000);

以下是演示：jsFiddle

参考文献：

显示倒计时器的警告框

1 个答案: