Запазване на JavaScript хронометър в бисквитки

Аз съм начинаещ в 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>

person Richard    schedule 09.01.2015    source източник


Отговори (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>
person CanNuhlar    schedule 09.01.2015
comment
Коментарите не са за разширена дискусия; този разговор беше преместен в чат. - person Taryn; 12.01.2015
comment
какво става с коментарите? о: - person Richard; 12.01.2015
comment
CanNuhlar там ли си? (: - person Richard; 13.01.2015