쿠키로 저장되는 자바 스크립트 스톱워치

나는 초보자이며 웹 사이트에서 일하지만, 제작중인 스톱워치에 머물러있다.쿠키로 저장되는 자바 스크립트 스톱워치

저는 timer.php에 있는데 스톱워치가 있습니다. 시작 버튼을 누르면 00:00:00부터 시작하여 exemple1.php 페이지로 이동하면 스톱워치가 카운팅을 멈추길 바라지 않습니다. 스톱워치를 계속 카운트하고 타이머가 다시 돌아 왔으면합니다. php 스톱워치는 멈춤 버튼을 누를 때까지 앞으로 계속 카운트를 유지하고 그 버튼을 누르면 그 값 (예 : 00:20:00)으로 멈 춥니 다.

여기에 나는 고생하고 있습니다. 내가 다른 페이지로 이동할 때 스톱 워치가 멈추고 스톱워치를 계속 카운트하고 타이머가 다시 움직이게하고 싶지 않기 때문에 스톱워치 카운팅을 볼 수 있으며 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>

출처

2015-01-09 Richard

필요하지 않은 경우 -

데모 : 여기

내 코드입니다오래된 브라우저 지원은 HTML5의 localstorage 기능을 사용할 수 있습니다. 새로운 페이지가로드 될 때마다 값을 저장하고로드하십시오.

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>

출처

2015-01-09 20:13:49 CanNuhlar

댓글입니다하지 확장 토론; 이 대화는 [채팅으로 이동되었습니다] (http://chat.stackoverflow.com/rooms/68658/discussion-on-answer-by-cannuhlar-java-script-stopwatch-saving-in-cookies). – Taryn

댓글에 어떤 일이 발생합니까? O : – Richard

CanNuhlar가 있습니까? (: – Richard

쿠키로 저장되는 자바 스크립트 스톱워치

답변

관련 문제