Question

好的，你可以从这篇文章的标题中看出来。我正在尝试如何创建一个24小时剩余的倒计时时钟。我无法理解如何解决这个问题。

我已经让它工作了5分钟，但我只需要在正确的方向上轻推一下如何将其变成几小时而不是

HTML：

<body>
    <input type="text" value="5">
    <div>Time Remaining <span id="remainingTime">05:00</span> minutes!</div>
</body>

的JavaScript / jQuery的：

function Timer(duration, display) 
{
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

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

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

jQuery(function ($) 
{
    var fiveMinutes = 60 * jQuery('#checkTime').val();
    var display = $('#remainingTime');
    Timer(fiveMinutes, display);
});

请不要插件。

Answer 1

我改变了你的小提琴，

function Timer(duration, display) 
{
    var timer = duration, hours, minutes, seconds;
    setInterval(function () {
        hours = parseInt((timer /3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10)
        seconds = parseInt(timer % 60, 10);

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

        display.text(hours +":"+minutes + ":" + seconds);

                --timer;
    }, 1000);
}

jQuery(function ($) 
{
    var twentyFourHours = 24 * 60 * 60;
    var display = $('#remainingTime');
    Timer(twentyFourHours, display);
});

请在此处查看：http://jsfiddle.net/j1zn0x9c/

编辑：记住我所做的更正。这根本不是线性的。也请检查this answer。

Answer 2

你应该做功课。所以，我只想告诉你如何修改它。

您的fiveMinutes变量以秒为单位提供时间。如果#checkTime的值为5，那么fiveMinutes等于300.如果您需要24小时，则此变量应为60 x 60 x 24。

现在，当函数内部传递了这个秒数时，它会将数字分解为分钟和秒。

minutes = parseInt(timer / 60, 10);    //n secs div 60 = minutes   
seconds = parseInt(timer % 60, 10);

您需要为此添加小时数。

hours = parseInt(timer / 60 * 60)      // (n secs div 60 = mins) div 60 = hours

修改您的display字符串以显示小时数。

请立即做好功课。

Answer 3

您可以使用这个小型javascript项目：http://neswork.com/javascript/alarm-clock/直接或复制您想要的功能

Answer 4

只是在setTimeout内进行，最终会使计时器失效。

最好做一些如下所示的事情

function timerUpdate() {        
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    setTimeout(timerUpdate,1000);

    //Update the hour, minute and second in UI
}

我的意思是，经常同步您的倒计时。也可以使用2个定时器或更长的延迟来改善1秒定时器

Answer 5

你可以用moment.js吗？在代码中处理时间时，它可以为您节省大量复杂性。 jsFiddle

代码：

    function Timer(duration, display) 
{
   var myInterval = setInterval(function () {
        var subtract = duration.subtract(1, 'seconds');
        var formatted = moment(subtract).format('HH:mm:ss');
        if(formatted === '00:00:00'){
            clearInterval(myInterval);
        }
        display.text(formatted);

    }, 1000);
}

jQuery(function ($) 
{
    var fiveMinutes = moment().hours(23).minutes(59).seconds(59);
    var display = $('#remainingTime');
    Timer(fiveMinutes, display);
});

设置24小时倒计时

5 个答案: