Javascript秒錶

我正在嘗試開發一個網頁。爲此我需要一個秒錶。我找到了一個。但它滿足了我的要求。我的要求是當我提交那個頁面，我想繼續秒錶。我希望它能像單圈計時器一樣運行。誰能幫我？請。Javascript秒錶

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

來源

2013-11-01 user27019

當你提交表單時會發生什麼？ –

我認爲你需要使用AJAX或者發送一個變量來告訴JavaScript定時器在哪裏。 – putvande

我打算說AJAX或PHP會話變量，但沒有更多信息很難確定。 –

有幾種方法可以完成此操作，雖然我的建議是使用cookie。

可以存儲在當計時器在cookie中使用JavaScript如下開始的時間戳：

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的Cookie來源：http://www.quirksmode.org/js/cookies.html

來源

2013-11-01 09:30:27

回答

相關問題