2017-06-09 14 views
0

私の「秒」の値は59(デフォルト値)で始まりカウントダウンタイマー値リセット

が、一時停止ボタンがクリックされたとき(つまりカウントダウンが開始した後)...

と遊びボタンが再び押されると、59で始まります!代わりに、クリックされた時の一時停止の秒のcuurent価値の...

チェックアウトのコードを助けてください、あなたの関数では...私が間違って何をしたか

var y = parseInt(document.getElementById("myP1").innerHTML); 
 
var z = parseInt(document.getElementById("h1").innerHTML); 
 

 
var f; 
 

 
function addTo1() { 
 
    y = y + 5; 
 
    document.getElementById("myP1").innerHTML = y + "m"; 
 
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0; 
 
} 
 

 
function subFrom1() { 
 
    if (y > 5) { 
 
    y = y - 5; 
 
    document.getElementById("myP1").innerHTML = y + "m"; 
 
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0; 
 
    } 
 
} 
 

 
document.getElementById("btn").addEventListener("click", function() { 
 
    var min = z - 1; 
 
    var sec = z - z + 59; 
 

 
    f = setInterval(function() { 
 
    document.getElementById("h1").innerHTML = min + ":" + sec; 
 
    if (min === 0 && sec === 0) { 
 
     document.getElementById("h1").innerHTML = "0:00"; 
 
     document.getElementById("mp3").play(); 
 
     clearInterval(f); 
 
    } else if (sec === 0) { 
 
     min--; 
 
     sec = 59; 
 
    } 
 
    sec--; 
 
    }, 50); 
 

 
}); 
 

 
document.getElementById("btn4").addEventListener("click", function() { 
 
    clearInterval(f); 
 
    document.getElementById("myP1").innerHTML = 25 + "m"; 
 
    document.getElementById("h1").innerHTML = "25:00"; 
 
}); 
 

 
document.getElementById("btn1").addEventListener("click", function() { 
 
    var b = document.getElementById("h1").innerHTML; 
 
    var c = parseInt(b[3] + b[4]); 
 
    clearInterval(f); 
 
    z = min; 
 
    c = sec; 
 
    if (z === 0) { 
 
    clearInterval(f); 
 

 
    } 
 

 
});
<div class="container"> 
 
    <h1>Pomodoro Clock</h1> 
 
    <div class="button"> 
 

 
    <div class="sess"> 
 
     <p>Sesion Length</p> 
 
     <div class="btn"> 
 
     <button onclick="subFrom1()"> 
 
       - 
 
       </button> 
 
     <p class="p1" id="myP1">25m</p> 
 
     <button class="add" onclick="addTo1()"> 
 
       + 
 
       </button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <h2 id="h1">25:00</h2> 
 
    <button id="btn"> 
 
     play</button> 
 
    <button id="btn1"> 
 
     pause 
 
      </button> 
 
    <button id="btn4"> 
 
      reset</button> 
 
</div>

+0

あなたのボタンのクリックは、再び、カウントを開始する代わりに、それが停止した場所を拾っています。停止した時点で値を保存し、再起動時にその値を確認してください。 – htm11h

答えて

0

を見ます再生ボタンがクリックされたときに実行される最初の2行で、minとsecの両方をリセットします。これらの値が開始時刻よりも小さいかどうかを確認し、必要に応じて値を変更したい場合があります。グローバルオブジェクトのプロパティとして保存すると便利です。

0

var y = parseInt(document.getElementById("myP1").innerHTML); 
 
var z = parseInt(document.getElementById("h1").innerHTML); 
 

 
var f; 
 

 
function addTo1() { 
 
    y = y + 5; 
 
    document.getElementById("myP1").innerHTML = y + "m"; 
 
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0; 
 
} 
 

 
function subFrom1() { 
 
    if (y > 5) { 
 
    y = y - 5; 
 
    document.getElementById("myP1").innerHTML = y + "m"; 
 
    document.getElementById("h1").innerHTML = y + ":" + 0 + 0; 
 
    } 
 
} 
 

 
document.getElementById("btn").addEventListener("click", function() { 
 
    z = parseInt(document.getElementById("h1").innerHTML); 
 
    var min = z - 1; 
 
    var sec = z - z + 59; 
 
    if(f) clearInterval(f); 
 
    f = setInterval(function() { 
 
    document.getElementById("h1").innerHTML = min + ":" + sec; 
 
    if (min === 0 && sec === 0) { 
 
     document.getElementById("h1").innerHTML = "0:00"; 
 
     document.getElementById("mp3").play(); 
 
     clearInterval(f); 
 
    } else if (sec === 0) { 
 
     min--; 
 
     sec = 59; 
 
    } 
 
    sec--; 
 
    }, 50); 
 

 
}); 
 

 
document.getElementById("btn4").addEventListener("click", function() { 
 
    clearInterval(f); 
 
    document.getElementById("myP1").innerHTML = 25 + "m"; 
 
    document.getElementById("h1").innerHTML = "25:00"; 
 
}); 
 

 
document.getElementById("btn1").addEventListener("click", function() { 
 
    var b = document.getElementById("h1").innerHTML; 
 
    var c = parseInt(b[3] + b[4]); 
 
    clearInterval(f); 
 
    z = min; 
 
    c = sec; 
 
    if (z === 0) { 
 
    clearInterval(f); 
 

 
    } 
 

 
});
<div class="container"> 
 
    <h1>Pomodoro Clock</h1> 
 
    <div class="button"> 
 

 
    <div class="sess"> 
 
     <p>Sesion Length</p> 
 
     <div class="btn"> 
 
     <button onclick="subFrom1()"> 
 
       - 
 
       </button> 
 
     <p class="p1" id="myP1">25m</p> 
 
     <button class="add" onclick="addTo1()"> 
 
       + 
 
       </button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <h2 id="h1">25:00</h2> 
 
    <button id="btn"> 
 
     play</button> 
 
    <button id="btn1"> 
 
     pause 
 
      </button> 
 
    <button id="btn4"> 
 
      reset</button> 
 
</div>

住んでありえない値z、あなたがそれをリロードする必要があるので...

+0

問題を解決しなかった – charles

+0

@charles私のために上部スニペットが機能しています... –

関連する問題