设置24小时剩余倒计时

好的，你可以从这篇文章的标题中得知。我正在尝试如何创建一个24小时剩余的倒数时钟。我无法理解如何解决这个问题。设置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); 
});

请插件。

来源

2016-01-12 Chris Beckett

这已经说过一千次，我知道，但为什么不能用一个简单的jQuery插件呢？特别是因为你已经加载jQuery的依赖。或者这是一个学习如何构建计时器的宠物项目？ –

@JonKoops - 这是一个宠物项目，我不想使用jQuery插件 –

@JonKoops我可能对此很蠢，答案是60 * 60 *任何数字在输入字段中？ –

我改变了你拨弄了一下功能，

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。

来源

2016-01-12 15:33:05 Joum

@ChrisBeckett ...修复它，对于stoopid错误抱歉。：D – Joum

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

来源

2016-01-12 15:27:57 Gavriel

只要在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秒定时器

来源

2016-01-12 15:33:06 Oxi

你应该做你的功课。所以，我会给你一个想法如何修改这个。

您的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字符串显示小时了。

请现在就做好功课。

来源

2016-01-12 15:38:37

并不意味着成为一个阻力，但伪善的“做你的功课”位是有点不必要的。特别是当你甚至没有在他的问题上发表什么光。 – Joum

我比你流光更多。我的灯甚至涵盖了他自愿理解代码的方面，而不是从外面寻求完整的解决方案。 –

K dude ...有一个很好的！ – Joum

你可以使用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); 
});

来源

2016-01-12 15:50:35

刚刚看到你的无插件请另外...所以没关系。 –

设置24小时剩余倒计时

回答

相关问题