javascript - 如何在 html 页面中显示正在运行的计数器

Question

我有一个包含数值的 div 元素。这对应于分钟数：当前游戏的秒数。我想让它成为一个运行计数器，显示尝试解决游戏所花费的时间。

Answer 1

如果您愿意，我有一个功能性小提琴可以使用：

http://jsfiddle.net/nicholas_eden/zaRqQ/

html:

<span id="elapsed">0:00</span>;​

Javascript: var $elapsed = $('#elapsed');

var start = new Date().getTime();


function updateTime() {
  var now = new Date().getTime();
  var elapsed = now - start;
  var formatted = secondsToTime(elapsed/1000);
  $elapsed.html(formatted.h + ':' + formatted.m + ':' + formatted.s);
  setTimeout(updateTime, 1000);
}


function secondsToTime(secs) {
  var hours = Math.floor(secs / (60 * 60));

  var divisor_for_minutes = secs % (60 * 60);
  var minutes = Math.floor(divisor_for_minutes / 60);

  var divisor_for_seconds = divisor_for_minutes % 60;
  var seconds = Math.ceil(divisor_for_seconds);

  if (minutes < 10) {
    minutes = '0' + minutes;
  }

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  var obj = {
    "h": hours,
    "m": minutes,
    "s": seconds
  };
  return obj;
}

updateTime();​

这采用获取初始时间的方法，然后每秒计算当前时间和初始时间的差。然后将其解析为更易读的格式。

Answer 2

我会先尝试为您指明正确的方向——如果您自己设法完成一项任务（尽管有指导），您总是会学到更多。如果您仍然遇到问题，请发表评论，我很乐意提供更多基于代码的答案。

跟踪两个变量：totalSeconds和totalMinutes。编写一个每秒执行一次的函数（这可以使用 JavaScript 的setInterval方法来完成），将totalSeconds- 加 1，如果该数字达到 60，则加 1totalMinutes并重置totalSeconds为 0。

即，这是两个变量将包含的内容，每秒修改一次：

totalSeconds <- 0
totalMinutes <- 0

totalSeconds <- 1
totalMinutes <- 0

totalSeconds <- 2
totalMinutes <- 0

...

totalSeconds <- 59
totalMinutes <- 0

totalSeconds <- 0
totalMinutes <- 1

totalSeconds <- 1
totalMinutes <- 1

totalSeconds <- 2
totalMinutes <- 1

...

更新这两个变量后，更改 div 的innerHTML属性以表示更改。

祝你好运！

Answer 3

在 HTML 中

<div id="countdown" onload="countDown(10:20)"> 10:20 </div>

在 JS 中

function countDown(time) { 
    cmin2=time.split(":")[0];
    csec2=time.split(":")[1];
    down=setInterval(function(){DownRepeat();},1000);
}

unction DownRepeat() { 
    csec2--;        
    if(csec2==-1) { 
        csec2=59; cmin2--; 
    }

    if ((cmin2 == 0) && (csec2 == 0)) {
         clearInterval(down);
     //do ur action after finish count down
    }   
    document.getElementById("countdown").innerHTML = cmin2 + ";" + csec2; 
}

Answer 4

将计数器保持在 iframe 中，让 iframe 每半秒或每秒刷新一次，因此“游戏”继续运行，但 iframe 将每秒显示一个更新的计数器。（我不会比第二更接近）

-S