设置剩余24小时倒计时

Set 24 hours remaining countdown

本文关键字：倒计时 24小时 设置      更新时间：2023-09-26

从这篇文章的标题中可以看出。我正在研究如何创建一个剩余24小时的倒计时时钟。我就是不知道该怎么办。

我已经用了5分钟的时间，但我只需要朝着正确的方向努力，把它变成小时，而不是

JSFiddle演示

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);
});

请不要使用插件。

我把你的小提琴改了一点，

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/

编辑：注意我所做的更正。这根本不是线性的。也请检查这个答案。

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

只在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
}

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

你应该做你的家庭作业。所以，我只给你一个如何修改的想法。

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

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

    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

  3. 修改display字符串以显示小时数。

请现在做作业。

你能使用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);
});
相关文章：