秒表/计时器，保存变量并显示在高分列表中（HTML，JS）答案

【问题标题】：Stopwatch / Timer, save var and show in high score list (HTML, JS)秒表/计时器，保存变量并显示在高分列表中（HTML，JS）
【发布时间】：2015-11-04 01:26:46
【问题描述】：

我正在构建一个需要计时器的 Web 应用程序：在特定事件时启动、停止和重置。在这些之后，我想将变量保存在“高分”列表中。

该应用应该与 AR 眼镜一起用于维护工作。

该应用应包含应测量作业持续时间的功能。

这是与我的问题相关的代码：

JS：

 var    clsStopwatch = function() {
            // Private vars
            var startAt = 0;    // Time of last start / resume. (0 if not running)
            var lapTime = 0;    // Time on the clock when last stopped in milliseconds

        var now = function() {
                return (new Date()).getTime(); 
            }; 

        // Public methods
        // Start or resume
        this.start = function() {
                startAt = startAt ? startAt : now();
            };

        // Stop or pause
        this.stop = function() {
                // If running, update elapsed time otherwise keep it
                lapTime = startAt ? lapTime + now() - startAt : lapTime;
                startAt = 0; // Paused
            };

        // Reset
        this.reset = function() {
                lapTime = startAt = 0;
            };

        // Duration
        this.time = function() {
                return lapTime + (startAt ? now() - startAt : 0); 
            };
    };

var x = new clsStopwatch();
var $time;
var clocktimer;
var ourTime = 3;

function pad(num, size) {
    var s = "0000" + num;
    return s.substr(s.length - size);
}

function formatTime(time) {
    var h = m = s = ms = 0;
    var newTime = '';

    h = Math.floor( time / (60 * 60 * 1000) );
    time = time % (60 * 60 * 1000);
    m = Math.floor( time / (60 * 1000) );
    time = time % (60 * 1000);
    s = Math.floor( time / 1000 );
    ms = time % 1000;

    newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
    return newTime;
}

function show() {
    $time = document.getElementById('time');
    update();
}

function update() {
    $time.innerHTML = formatTime(x.time());
}

function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
}

function stop() {
    x.stop();
    clearInterval(clocktimer);
}

function reset() {
    stop();
    x.reset();
    update();
}

HTML：

<head>
    <meta charset="UTF-8">
    <title>Stopwatch</title>
</head>
<body onload="show();">
    <div>Time: <span id="time"></span></div>
    <input type="button" value="start" onclick="start();">
    <input type="button" value="stop" onclick="stop();">
    <input type="button" value="reset" onclick="reset()">
</body>


<div id="result"></div>


<script>
  if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("lastname", ourTime);
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}



</script>

在此示例中，值3 已保存并正确显示，但我无法显示秒表停止后的时间。

我想出的最好的是：

var ourTime = formatTime(X)

这将以正确的格式显示一个数字，但该值始终为 00:00:00 或未定义。如何获得正确的秒表停止值？

【问题讨论】：

标签： javascript html web-applications stopwatch web-storage

【解决方案1】：

问题是您尝试更新未定义的字段； update() 中调用的 $time 值设置为 NULL。为了解决这个问题，我在 start() 中声明了 $time ，现在它似乎可以工作了。另外，您根本没有使用 show() 函数，所以我只是将其省略，就像 localStorage 一样，因为它对问题没有贡献并且 xy 没有定义，因此它只会给我们造成错误。

 var clsStopwatch = function() {
   // Private vars
   var startAt = 0; // Time of last start / resume. (0 if not running)
   var lapTime = 0; // Time on the clock when last stopped in milliseconds

   var now = function() {
     return (new Date()).getTime();
   };

   // Public methods
   // Start or resume
   this.start = function() {
     startAt = startAt ? startAt : now();
   };

   // Stop or pause
   this.stop = function() {
     // If running, update elapsed time otherwise keep it
     lapTime = startAt ? lapTime + now() - startAt : lapTime;
     startAt = 0; // Paused
   };

   // Reset
   this.reset = function() {
     lapTime = startAt = 0;
   };

   // Duration
   this.time = function() {
     return lapTime + (startAt ? now() - startAt : 0);
   };
 };

 var x = new clsStopwatch();
 var $time;
 var clocktimer;
 var ourTime = 3;

 function pad(num, size) {
   var s = "0000" + num;
   return s.substr(s.length - size);
 }

 function formatTime(time) {
   var h = m = s = ms = 0;
   var newTime = '';

   h = Math.floor(time / (60 * 60 * 1000));
   time = time % (60 * 60 * 1000);
   m = Math.floor(time / (60 * 1000));
   time = time % (60 * 1000);
   s = Math.floor(time / 1000);
   ms = time % 1000;

   newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
   return newTime;
 }

 function update() {
   $time.innerHTML = formatTime(x.time());
 }

 function start() {
   //Declare $time here, so update() knows which field it needs to update
   $time = document.getElementById('time');
   clocktimer = setInterval("update()", 41);
   x.start();
 }

 function stop() {
   x.stop();
   clearInterval(clocktimer);
 }

 function reset() {
   stop();
   x.reset();
   update();
 }

<div>Time: <span id="time"></span></div>
<input type="button" value="start" onclick="start();">
<input type="button" value="stop" onclick="stop();">
<input type="button" value="reset" onclick="reset()">

【讨论】：

首先感谢您的回答。我想你误解了我的问题。计时器工作正常。我遇到的问题是将变量保存到本地存储中并显示正确的值。我将 xy 更改为 ourTime。