保存在cookies中的JavaScript秒錶

Question

我是JavaScript的初學者，我在一個網站工作，但是我被卡在我製作的秒錶上。

我需要的東西，我在timer.php，我有一個秒錶;當我們按下開始時，它開始從00:00:00開始計數，如果我移動到頁面exemple1.php，我不希望秒錶停止計數，我希望秒錶只是繼續計數，當我回到計時器時。 PHP的秒錶只是繼續向前計數，直到我按下停止按鈕，而當我按它停止在該值，例如00:20:00。

在這裏，我卡住了。這是在我移動到另一個頁面的部分，因爲秒錶剛剛停止，我不希望我希望秒錶只是繼續計數，當我再次移動到timer.php時，我看到秒錶計數並且不停止在00 ：00：00。

這裏是我的代碼：

演示 - Jsfiddle

Timer.php

<script language=javascript> 

if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1"))){ 

    var h=0; 
    var m=0; 
    var s=0; 



    } else { 
    var h1,s1,m1; 

    } 


function to_start(){ 
switch(document.getElementById('btn').value) 
{ 
case 'Pause': 
    window.clearInterval(tm); 
    document.getElementById('2btn').value=str; 
    document.getElementById('btn').value='Start'; 
break; 
case 'Start': 
    tm=window.setInterval('disp()',1000); 
    document.getElementById('btn').value='Pause'; 
break; 
} } 
function disp(){ 

if(s<10) { 
    s1='0' + s; 
} else { 
    s1=s; 
} 

if(m<10) { 
    m1='0' + m; 
} else { 
    m1=m; 
} 

if(h<10){ 
    h1='0' + h; 
} else { 
    h1=h; 
} 
// Display the output // 
str= h1 + ':' + m1 +':' + s1 ; 
document.getElementById('n1').innerHTML=str; 


if(s<59){ 
    s=s+1; 
}else{ 
    s=0; 
    m=m+1; 
if(m==60){ 
    m=0; 
    h=h+1; 
} 
}  
localStorage.ongoingh1 = h; 

localStorage.ongoingm1 = m; 

localStorage.ongoings1 = s; 

} 
    </script> 

    <input type="button" name="btn" id='btn' value="Start" onclick="to_start()";> 
    <br><br> 
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px; 
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div> 
    <br> 
    <br> 
    <br> 
    <input type="text" name="2btn" id='2btn' value="" /> 

    <br> 
    <br> 
    <br> 

exemple1.php

<script language=javascript> 

var s1,m1,h1; 
    h=localStorage.ongoingh1; 
    m=localStorage.ongoingm1; 
    s=localStorage.ongoings1; 



function to_start(){ 
    switch(document.getElementById('btn').value) 
    { 
    case 'Pause': 
     window.clearInterval(tm); 
     document.getElementById('2btn').value=str; 
     document.getElementById('btn').value='Start'; 
    break; 
    case 'Start': 
     tm=window.setInterval('disp()',1000); 
     document.getElementById('btn').value='Pause'; 
    break; 
    } 
} 


function disp(){ 

    if(s<10) { 
     s1="0" + s; 
    } else { 
     s1=s; 
    } 

    if(m<10) { 
     m1="0" + m; 
    } else { 
     m1=m; 
    } 

    if(h<10){ 
     h1="0" + h; 
    } else { 
     h1=h; 
    } 
    // Display the output // 
    str= h1 + ':' + m1 +':' + s1 ; 
    document.getElementById('n1').innerHTML=str; 

    if(s<59){ 
     s++; 
    }else{ 
     s=0; 
     m++; 
    if(m==60){ 
     m=0; 
     h++; 
    } 
    } 

} 
</script> 

Answer 1

如果你不需要舊的瀏覽器支持您可以使用HTML5的本地存儲功能。每次加載新頁面時，存儲您的值並加載它。

timer.php

  <script language=javascript> 


function settimer(){ 
if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1"))){ 

    h=localStorage.ongoingh1; 
    m=localStorage.ongoingm1; 
    s=localStorage.ongoings1; 
tm=window.setInterval('disp()',1000); 

document.getElementById('btn').value='Pause'; 

    } else { 
    var h1,s1,m1; 

    } 
    str= h + ':' + m +':' + s ; 
    document.getElementById('n1').innerHTML=str; 
    document.getElementById('btn').value='Pause'; 
    } 

function to_start(){ 
switch(document.getElementById('btn').value) 
{ 
case 'Pause': 
    window.clearInterval(tm); 
    document.getElementById('2btn').value=str; 
    document.getElementById('btn').value='Start'; 
break; 
case 'Start': 
    tm=window.setInterval('disp()',1000); 
    document.getElementById('btn').value='Pause'; 
break; 
} } 
function disp(){ 

if(s<10) { 
    s1='0' + s; 
} else { 
    s1=s; 
} 

if(m<10) { 
    m1='0' + m; 
} else { 
    m1=m; 
} 

if(h<10){ 
    h1='0' + h; 
} else { 
    h1=h; 
} 
// Display the output // 
str= h1 + ':' + m1 +':' + s1 ; 
document.getElementById('n1').innerHTML=str; 
localStorage.ongoingh1 = h; 

localStorage.ongoingm1 = m; 

localStorage.ongoings1 = s; 

if(s<59){ 
    s++; 
}else{ 
    s=0; 
    m++; 
if(m==60){ 
    m=0; 
    h++; 
} 
}  


} 
    </script> 
<body onload="settimer()"> 
    <input type="button" name="btn" id='btn' value="Start" onclick="to_start()";> 
    <br><br> 
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px; 
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div> 
    <br> 
    <br> 
    <br> 
    <input type="text" name="2btn" id='2btn' value="" /> 

    <br> 
    <br> 
    <br> 
    </body> 

example1.php

 <script language=javascript> 


function settimer(){ 
if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1"))){ 

    h=localStorage.ongoingh1; 
    m=localStorage.ongoingm1; 
    s=localStorage.ongoings1; 
tm=window.setInterval('disp()',1000); 

document.getElementById('btn').value='Pause'; 

    } else { 
    var h1,s1,m1; 

    } 
    str= h + ':' + m +':' + s ; 
    document.getElementById('n1').innerHTML=str; 
    document.getElementById('btn').value='Pause'; 
    } 


function to_start(){ 
    switch(document.getElementById('btn').value) 
    { 
    case 'Pause': 
     window.clearInterval(tm); 
     document.getElementById('2btn').value=str; 
     document.getElementById('btn').value='Start'; 
    break; 
    case 'Start': 
     tm=window.setInterval('disp()',1000); 
     document.getElementById('btn').value='Pause'; 
    break; 
    } 
} 


function disp(){ 

    if(s<10) { 
     s1="0" + s; 
    } else { 
     s1=s; 
    } 

    if(m<10) { 
     m1="0" + m; 
    } else { 
     m1=m; 
    } 

    if(h<10){ 
     h1="0" + h; 
    } else { 
     h1=h; 
    } 
    // Display the output // 
    str= h1 + ':' + m1 +':' + s1 ; 
    document.getElementById('n1').innerHTML=str; 
localStorage.ongoingh1 = h; 

localStorage.ongoingm1 = m; 

localStorage.ongoings1 = s; 
    if(s<59){ 
     s++; 
    }else{ 
     s=0; 
     m++; 
    if(m==60){ 
     m=0; 
     h++; 
    } 
    } 

} 

</script> 
<body onload="settimer()"> 
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";> 
    <br><br> 
    <div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px; 
    width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div> 
    <br> 
    <br> 
    <br> 
    <input type="text" name="2btn" id='2btn' value="" /> 

    <br> 
    <br> 
    <br></body>