jQuery时间计数器

时间:2011-07-08 11:00:22

标签: javascript jquery

我正在寻找插件或jQuery来执行以下操作:

  • 计算时间 - 以分钟为单位从0开始的秒数。
  • 开始计数页面加载=从每次重新加载开始计数

任何帮助都非常感激。

4 个答案:

答案 0 :(得分:7)

我敲了一些非常简单的东西来满足这样的要求。在https://github.com/robcowie/jquery-stopwatch获取,然后在http://jsfiddle.net/rob_cowie/Pt9nc/

查看演示

答案 1 :(得分:5)

在纯 javascript 中,您可以在一定程度上执行此操作:

  • 计时器很简单。在页面加载时,存储对当前时间的引用,然后定期更新某个字段,显示 now 然后之间的时间差。

    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,其中pretty good browser support。您可以在Mozilla documentation上了解更多相关信息。

    基本流程将是:

    1. 在sessionStorage中检查您的变量名称(假设"myPageCounter"
      • 如果不存在,则计数器值为0;
      • 如果确实存在,请抓取值
    2. 为值添加1。
    3. 将其存储回sessionStorage,为下一页加载做好准备。

答案 2 :(得分:3)

为什么不使用纯javascript计时事件。

这里有一些例子:

http://www.w3schools.com/js/js_timing.asp

即使只有几秒钟。我在下面对其进行了调整以计算分钟数:

<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>

答案 3 :(得分:0)

您可以尝试countdown plugin。您可以使用sinceuntil属性来指定它是倒数还是倒数。