Javascript jQuery 时间计数器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6623516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery time counter
提问by Iladarsda
I'm looking for plugin or jQuery to do following:
我正在寻找插件或 jQuery 来执行以下操作：
- count time - in minutes & seconds from 0.
- start count on page load = start counting from 0 every reload
- 计数时间 - 从 0 开始的分钟和秒。
- 页面加载时开始计数 = 每次重新加载时从 0 开始计数
Any help much appreciated.
非常感谢任何帮助。
回答by Rob Cowie
I knocked up something very simple to satisfy just such a requirement. Get it at https://github.com/robcowie/jquery-stopwatchand see a demo at http://jsfiddle.net/rob_cowie/Pt9nc/
我敲了一些非常简单的东西来满足这样的要求。在https://github.com/robcowie/jquery-stopwatch获取它并在http://jsfiddle.net/rob_cowie/Pt9nc/查看演示
回答by nickf
In pure javascript, you can do this, to an extent:
在纯javascript 中，您可以在一定程度上做到这一点：
The timer is simple. On page load, store a reference to the current time, and then periodically update some field, showing the difference in time between nowand then.
var startTime = new Date(), outputDiv = document.getElementById('output') // or $('#output').get(0) ; setInterval(function () { outputDiv.innerHTML = "ms since the start: " + (new Date() - startTime); }, 1000);I'll leave it as an exercise to the reader to fill in the time formatting to mm:ss or whatever.
The page counter is slightly more complicated since Javascript itself doesn't persist between page refreshes. You'll need to find some way to persist the data. The old way would be to use cookies, but with HTML5, a better solution would be to use
sessionStorage, which has pretty good browser support. You can read more about it on the Mozilla documentation.The basic flow would be this:
- Check for your variable name in sessionStorage (let's say
"myPageCounter")- if it doesn't exist, the counter value is 0;
- if it does exist, grab the value
- Add 1 to the value.
- Store it back into
sessionStorage, ready for the next page load.
- Check for your variable name in sessionStorage (let's say
定时器很简单。在页面加载时，存储对当前时间的引用，然后定期更新某个字段，显示now和then之间的时间差异。
var startTime = new Date(), outputDiv = document.getElementById('output') // or $('#output').get(0) ; setInterval(function () { outputDiv.innerHTML = "ms since the start: " + (new Date() - startTime); }, 1000);我将把它作为练习留给读者填写时间格式为 mm:ss 或其他格式。
页面计数器稍微复杂一些，因为 Javascript 本身不会在页面刷新之间持续存在。您需要找到某种方法来保存数据。旧的方法是使用 cookie，但是对于 HTML5，更好的解决方案是使用
sessionStorage，它具有很好的浏览器支持。您可以在Mozilla 文档 中阅读有关它的更多信息。基本流程是这样的：
- 检查 sessionStorage 中的变量名称（假设
"myPageCounter"）- 如果不存在，则计数器值为 0；
- 如果确实存在，则获取值
- 将值加 1。
- 将其存储回
sessionStorage，准备下一页加载。
- 检查 sessionStorage 中的变量名称（假设
回答by Fgblanch
Why not using pure javascript timing events.
为什么不使用纯 javascript 计时事件。
Some examples here:
这里的一些例子：
http://www.w3schools.com/js/js_timing.asp
http://www.w3schools.com/js/js_timing.asp
Even one that counts in seconds. I have adapted it here below to count minutes as well:
即使是秒计算。我在下面对其进行了修改以计算分钟数：
<html>
<head>
<script type="text/javascript">
var c=0;
var minutes= 0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value='minutes:'+ minutes + ' seconds: '+ c;
c=c+1;
if (c%60==0){
minutes+=1;
c=0;
}
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
回答by Darin Dimitrov
You may try the countdown plugin. You could use the sinceor untilproperties to specify whether it should count down or up.
你可以试试倒计时插件。您可以使用since或until属性来指定它是倒计时还是倒计时。
