秒表/計時器，保存var並顯示在高分列表中（HTML，JS）

Question

我正在構建一個需要計時器的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或未定義。 如何獲得正確的秒表停止值？

Answer 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()">

秒表/計時器，保存var並顯示在高分列表中（HTML，JS）

問題描述

1 個解決方案

解決方案1
1 2015-08-12 07:56:45

秒表/計時器，保存var並顯示在高分列表中（HTML，JS）

問題描述

1 個解決方案

解決方案1 1 2015-08-12 07:56:45

解決方案1
1 2015-08-12 07:56:45