0
JavaScriptを使用してタイマーをコーディングしようとしています。ページがロードされても問題はありませんが、唯一のことは、タイマを複数回リセットしたり、適用ボタン（そのボタンを表示するコードを参照してください）を使用してデュレーションを変更すると、タイマーは動作し続けます。私はそれがeventListenersと関係があると思う。何か案は？clearInterval（）の奇妙な動作
HTMLコード：
<body>
<h1 class="page-header text-center">title</h1>
<div class="container text-center">
<div class="row">
<div id="customizeLength">
<p>Customize timer:</p>
<button id="plus" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>
<span id="sessLength"></span>
<button id="minus" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-minus"></span></button>
<button id="apply"type="button" class="btn btn-default btn-sm">> Apply</button>
</div>
<br/>
<div id="clock">
<span id="minutes"></span> : <span id="seconds"></span>
</div>
<br/>
<button id="reset" type="button" class="btn btn-default btn-sm">
> Reset
</button>
<div>
<div>
<script src=./script.js></script>
</body>
JavaScriptのコード：あなたの忍耐のため
//Countdown from provided later time to current time:
function getTimeRemaining(endTime) {
var t = Date.parse(endTime) - Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
return {
"tracker": t,
"seconds": seconds,
"minutes": minutes,
}
}
//Update html elements:
function updateClock(endTime){
var t = getTimeRemaining(endTime);
var clock = document.getElementById("clock");
var minutes = clock.querySelector("#minutes");
var seconds = clock.querySelector("#seconds");
minutes.innerHTML = t.minutes;
seconds.innerHTML = t.seconds;
if (t.tracker === 0){
clearInterval(timerID);
}
}
//Modify Date's prototype to append function addMinutes():
Date.prototype.addMinutes = function(minutes=30){
this.setMinutes(this.getMinutes() + minutes);
return this;
};
//###################################################################################
var param_ = new Date().addMinutes();
updateClock(param_);
var timerID = setInterval(updateClock,1000, param_);
var sessLength = document.getElementById("sessLength");
sessLength.innerHTML = "30";
var buttonReset = document.getElementById("reset");
var applySession = document.getElementById("apply");
buttonReset.addEventListener("click", function(){
clearInterval(timerID);
var param_ = new Date().addMinutes();
updateClock(param_);
setInterval(updateClock,1000, param_);
});
//Customize Session's Length:
var addMinutes_ = document.getElementById("plus");
var reduceMinutes_ = document.getElementById("minus");
addMinutes_.addEventListener("click", function(){
var sessLength_plus1 = parseInt(sessLength.textContent) + 1;
sessLength.innerHTML = sessLength_plus1;
});
reduceMinutes_.addEventListener("click", function(){
var sessLength_minus1 = parseInt(sessLength.textContent) - 1;
sessLength_minus1 < 0 ? sessLength.innerHTML = 0 : sessLength.innerHTML = sessLength_minus1;
});
applySession.addEventListener("click", function(){
var apply_ = sessLength.textContent;
clearInterval(timerID);
var param_ = new Date().addMinutes(parseInt(apply_));
updateClock(param_);
setInterval(updateClock,1000, param_);
});
感謝します。あなたはそれをクリアした後の第二の時間を間隔を設定すると、一般的に、それは別のID
となりますので、あなたはまだ、timerIdの変数に返されたIDを割り当てる必要があります
'clearInterval（timeinterval）;' - 'timeinterval'は誰ですか？投稿されたコードではその名前の参照を見つけることができません。 –
@Ovidiuを指摘してくれてありがとう、それはtimerIDを参照しています。私はそれを編集します – Valilutzik