JavaScript 秒表保存在 cookie 中

Question

我是 JavaScript 的初学者，我在网站上工作，但我在制作秒表时卡住了。

我需要类似的东西，我在 timer.php 并且我有一个秒表；当我们按下开始时，它从 00:00:00 开始计数，如果我转到 exemple1.php 页，我不希望秒表停止计数，我希望秒表继续计数，当我回到timer.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>

JavaScript 秒表保存在 cookie 中

JavaScript stopwatch saving in cookies

javascript

cookies

jquery

timer

stopwatch