Сохранение секундомера JavaScript в файлах cookie

Я новичок в JavaScript и работаю над веб-сайтом, но застрял на секундомере, который делаю.

Мне нужно что-то вроде, я в timer.php и у меня есть секундомер; когда мы нажимаем «Пуск», он начинает отсчет с 00:00:00, и если я перехожу на страницу «example1.php», я не хочу, чтобы секундомер просто прекращал отсчет, я хочу, чтобы секундомер просто продолжал считать, и когда я возвращаюсь к таймеру. php секундомер просто продолжает считать вперед, пока я не нажму кнопку остановки, и когда я нажму, он просто остановится на этом значении, например, 00:20:00.

И вот я застрял. Это в той части, когда я перехожу на другую страницу, потому что секундомер просто останавливается, и я не хочу, чтобы секундомер просто продолжал считать, и когда я снова перехожу к timer.php, я вижу, что секундомер считает, а не остановился в 00 :00:00.

Вот мой код:

Демо — Jsfiddle

Таймер.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>

пример1.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>

пример1.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