【问题标题】:JavaScript stopwatch saving in cookiesJavaScript 秒表保存在 cookie 中
【发布时间】:2015-03-08 04:18:26
【问题描述】:

我是 JavaScript 的初学者,我在一个网站上工作,但我被困在我正在制作的秒表上。

我需要类似的东西,我在 timer.php 中,我有一个秒表;当我们按下开始时,它从 00:00:00 开始计数,如果我移动到页面 example1.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>

example1.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>

【问题讨论】:

    标签: javascript jquery cookies timer stopwatch


    【解决方案1】:

    如果您不需要旧的浏览器支持,您可以使用 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>
    

    【讨论】:

    • 评论不用于扩展讨论;这个对话是moved to chat
    • cmets 发生了什么? o:
    • CanNuhlar 你在吗? (:
    猜你喜欢
    • 2022-01-02
    • 2018-09-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-12
    • 2018-09-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多