Javascript 设置剩余24小时倒计时

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

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

HTML:

剩余时间05:00分钟！

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

功能计时器（持续时间、显示）
{
var定时器=持续时间，分钟，秒；
setInterval（函数（）{
分钟=parseInt（计时器/60,10）
秒=parseInt（计时器%60,10）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
显示文本（分钟+“：”+秒）；
如果（--定时器<0）{
定时器=持续时间；
}
}, 1000);
}
jQuery（函数（$）
{
var fiveMinutes=60*jQuery（'#checkTime'）.val（）；
变量显示=$（“#剩余时间”）；
计时器（五分钟，显示）；
});

---

请不要使用插件。

你可以使用这个小javascript项目：要么直接使用，要么复制你想要的功能

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

功能计时器（持续时间、显示）
{
var定时器=持续时间、小时、分钟、秒；
setInterval（函数（）{
小时=parseInt（（计时器/3600）%24,10）
分钟=parseInt（（计时器/60）%60，10）
秒=parseInt（计时器%60,10）；
小时=小时<10？“0”+小时：小时；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
显示文本（小时+“：“+分钟+”：“+秒）；
--定时器；
}, 1000);
}
jQuery（函数（$）
{
var twentyFourHours=24*60*60；
变量显示=$（“#剩余时间”）；
计时器（24小时，显示）；
});

在这里查看：

---

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

只需在

设置超时内执行操作，计时器最终会滑出

最好做如下所示的事情

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个计时器或更大的延迟来改进，您应该做您的家庭作业。所以，我将给你一个如何修改的想法

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


修改
显示
字符串以显示小时数

请现在做作业。
你能使用矩量.js吗？在处理代码中的时间时，它可以为您节省大量的复杂性

代码：

这在我知道之前已经说过一千遍了，但是为什么不使用一个简单的jQuery插件呢？特别是因为您已经将jQuery作为依赖项加载。或者这是一个学习如何构建计时器的宠物项目？@JonKoops-这是一个宠物项目，我不想使用jQueryplugin@JonKoops我可能有点傻，答案是60*60*不管输入框里有什么数字？不是真的，尽管出于调试目的，我建议使用一个设置的数字，直到剩余的逻辑功能正常为止。请注意，
Timer
函数的第一行不正确（
var Timer=duration，minutes，seconds；
）。不能同时分配和创建新变量。另外，由于
minutes
和
seconds
变量仅在匿名函数中使用，因此您应该在匿名函数中定义它们。这并不意味着拖拉，但神圣的“完成您的家庭作业”位有点不必要。特别是当你对他的问题都不太了解的时候。我比你更了解。我的光甚至覆盖了他对代码的自愿理解，而不是从外部寻求完整的解决方案。。。祝你过得愉快！刚刚看到你没有插件请添加。。。所以别客气。@ChrisBeckett。。。修复了它，很抱歉出现了弯腰虫D
hours = parseInt(timer / 60 * 60)      // (n secs div 60 = mins) div 60 = hours

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