Javascript stopwatch

本文关键字：stopwatch Javascript 更新时间：2023-09-26

我正在尝试开发一个网页。为此，我需要秒表。我找到了一个。但它满足了我的要求。我的要求是当我提交该页面时，我想继续秒表。我希望它作为单圈计时器运行。谁能帮我？请。

    <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Stopwatch</title>
 <script>
 // Simple example of using private variables
 //
 // To start the stopwatch:
 // obj.start();
 //
 // To get the duration in milliseconds without pausing / resuming:
 // var x = obj.time();
 //
 // To pause the stopwatch:
 // var x = obj.stop(); // Result is duration in milliseconds
 //
 // To resume a paused stopwatch
 // var x = obj.start(); // Result is duration in milliseconds
 //
 // To reset a paused stopwatch
 // obj.stop();
 //
 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;
 function pad(num, size) {
     var s = "0000" + num;
     return s.substr(s.length - size);
 }
 function formatTime(time) {
     var h = m = s = 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 );
     newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2);
     return newTime;
 }
 function show() {
     $time = document.getElementById('time');
     update();
     start();
 }
 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();
 }
 </script>
 </head>
     <body onload="show();">
         <div>Time: <span id="time"></span>
             <form action="testing.php?job=test" method="post">
                <input type="submit"/>
             </form>
         </div>
     </body>
 </html>

有几种方法可以实现此目的，尽管我的建议是使用 cookie。

您可以使用javaScript在cookie中存储计时器启动时的时间戳，如下所示：

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
var timerStarted = new Date();
createCookie('timerStarted', timerStarted.getTime(), 1)

然后，您可以在连续页面加载时从 cookie 中读取timerStarted值，并使用它来计算时差：

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
var timerStarted = new Date(readCookie(timerStarted));

JS 饼干来源： http://www.quirksmode.org/js/cookies.html