JavaScript添加暂停选项倒数计时器不工作 [英] Javascript adding a pause option to countdown timer not working
问题描述
我有一个javascript函数来倒数计时器。所以我想添加暂停选项到这个功能。我试过这种方式，
function countdownTimeStart（）{var el = document。的getElementById（ '演示'）; var pause = document.getElementById（'pause'）; var time = [10,10,10]; var x = setInterval（function（）{var hours = time [0]; var minutes = time [1]; var seconds = time [2] - ; if（time [2] == -1）{time [1 ];; time [2] = 59} function pauseTimer（）{savedTime = time; clearInterval（x）;} pause.addEventListener（'click'，pauseTimer）; if（seconds == 0&& minutes == 0& amp; hours == 0）{clearInterval（x）; el.innerHTML =00:00:00;} else if（seconds< 10）{el.innerHTML = hours +：+ minutes + ：+0+ seconds +;} else {el.innerHTML = hours +：+ minutes +：+ seconds +;}}，1000）;} countdownTimeStart（） code>
< button id =pauseclass =pause> ;暂停< / button>< div id =demo>< / div>
倒数计时器正常工作。但暂停选项不起作用。那么我该如何纠正这个脚本。有人能帮我吗。
虽然你的代码正在工作，但我想指出几件事情：在你的 更新添加取消按钮： I have a javascript function to countdown a timer. So I want to add pause option to this function. I tried this way,
The countdown timer working correctly. But the pause option not working. So how can I correct this script. Can someone help me. Although your code is working, I would like to note a couple of things: adding your pause handler inside your
Update Adding a cancel button:
这篇关于JavaScript添加暂停选项倒数计时器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ interval 不是一个好主意，你会在每个时间间隔内添加一个暂停处理程序，所以最后你只需要堆叠处理函数的数量点击时。我已经让你的按钮切换并将事件监听器分隔成一个处理函数，以便你可以将它附加到任何按钮上。这些更改将使您的代码流畅地工作，同时使其更易于理解：
function initCountdown（）{function event_click（event）{//如果我们的时间间隔为空，我们需要启动计数器//并且改变innerText，这样它明显的显示按钮下一步会做什么if（interval === null） {start（）; event.target.innerText ='pause'; } else {pause（）; event.target.innerText ='start'; }} function start（）{//首先使用pause（）来确保所有的时间间隔都被清除//它可以防止他们将pause（）加倍。 interval = setInterval（count，1000）; } function pause（）{clearInterval（interval）; interval = null; } function count（）{//通过在声明变量之前执行此操作，//使其成为实际保存新计算值的变量。时间[2] - ; if（time [2] == -1）{time [1] - ;时间[2] = 59; } //让我们在这里使用一些很酷的新语法来减少所需的代码量//这将解构一个数组，将它们的索引值赋值给变量var [hours，minutes，seconds] = time; if（seconds == 0&& minute == 0&& hours == 0）{clearInterval（interval）; } //我们总是想打印一些东西，如果这些值是0 //输出仍然是相同的，那么让我们分离一下。 if（seconds <10）{outputElement.innerHTML = hours +：+ minutes +：+0+ seconds +; } else {outputElement.innerHTML = hours +：+ minutes +：+ seconds +; }} //让我们也清楚地命名我们的东西。 var outputElement = document.getElementById（'demo'）; var toggleElement = document.getElementById（'toggle'）; var interval = null; var time = [10,10,10]; //添加事件侦听器一次toggleElement.addEventListener（'click'，event_click）; toggleElement.click（）; } initCountdown（）; < button id =toggle > start< / button>< div id =demo>< / div>
$ b
function initCountdown（）{function event_click_cancel（event）{pause（）;时间= [0,0,0];打印（）; } function event_click_startpause（event）{//如果我们的时间间隔为空，我们需要启动计数器//并且改变innerText，这样它明显的显示按钮下一步会做些什么if（interval === null）{start（）; event.target.innerText ='pause'; } else {pause（）; event.target.innerText ='start'; }} function start（）{//首先使用pause（）来确保所有的时间间隔都被清除//它可以防止他们将pause（）加倍。 interval = setInterval（count，1000）; } function pause（）{clearInterval（interval）; interval = null; } function print（）{//我已经分离出了打印函数，因为我们想要在计数和取消函数中使用它// var [hours，minutes，seconds] = time; if（seconds == 0&& minute == 0&& hours == 0）{clearInterval（interval）; } if（seconds< 10）{outputElement.innerHTML = hours +：+ minutes +：+0+ seconds +; } else {outputElement.innerHTML = hours +：+ minutes +：+ seconds +; }} function count（）{//通过在声明变量之前执行此操作，//使其成为变量实际上保存新计算的值。时间[2] - ; if（time [2] == -1）{time [1] - ;时间[2] = 59; } print（）; } //让我们也清楚地命名我们的东西。 var outputElement = document.getElementById（'demo'）; var toggleElement = document.getElementById（'toggle'）; var cancelElement = document.getElementById（'cancel'）; var interval = null; var time = [10,10,10]; //添加一次事件侦听器toggleElement.addEventListener（'click'，event_click_startpause）; toggleElement.click（）; cancelElement.addEventListener（'click'，event_click_cancel）; } initCountdown（）; < button id =toggle > start< / button>< button id =cancel> cancel< / button>< div id =demo>< / div> function countdownTimeStart() {
var el = document.getElementById('demo');
var pause= document.getElementById('pause');
var time = [10,10,10];
var x = setInterval(function () {
var hours = time[0];
var minutes = time[1];
var seconds = time[2]--;
if (time[2] == -1) {
time[1]--;
time[2] = 59 }
function pauseTimer() {
savedTime = time;
clearInterval(x);
}
pause.addEventListener( 'click', pauseTimer);
if( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval(x);
el.innerHTML = "00:00:00";
} else if (seconds < 10) {
el.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
el.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}, 1000);
}
countdownTimeStart();<button id="pause" class="pause">Pause</button>
<div id="demo"></div>interval isn't a good idea, you will be adding a pause handler every interval, so in the end you are just stacking up the amount of functions to handle when clicking. I have made your button toggle and separated out the event listener into a handler function so you can attach it to any button. These changes will keep your code working fluently while also making it easier to understand:function initCountdown() {
function event_click( event ){
// If our interval is null, we need to start the counter
// And also change the innerText so its obvious what the button will do next
if( interval === null ){
start();
event.target.innerText = 'pause';
} else {
pause();
event.target.innerText = 'start';
}
}
function start(){
// First use pause() to be sure all intervals are cleared
// it prevents them from doubling up
pause();
interval = setInterval( count, 1000 );
}
function pause() {
clearInterval( interval );
interval = null;
}
function count(){
// By doing this before declaring your variables
// you make it so the variables actually hold the new calculated values.
time[2]--;
if( time[2] == -1 ){
time[1]--;
time[2] = 59;
}
// Lets use some cool new syntax here to reduce the amount of code needed
// this will destructure an array assigning their indexed values to the index of the variable
var [ hours, minutes, seconds ] = time;
if( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval( interval );
}
// We always want to print something, and if the values are 0
// the output is still the same, so lets seperate that.
if (seconds < 10) {
outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}
// Lets also clearly name our things.
var outputElement = document.getElementById('demo');
var toggleElement = document.getElementById('toggle');
var interval = null;
var time = [10,10,10];
// Add event listener once
toggleElement.addEventListener( 'click', event_click );
toggleElement.click();
}
initCountdown();<button id="toggle">start</button>
<div id="demo"></div>function initCountdown() {
function event_click_cancel( event ){
pause();
time = [ 0, 0, 0 ];
print();
}
function event_click_startpause( event ){
// If our interval is null, we need to start the counter
// And also change the innerText so its obvious what the button will do next
if( interval === null ){
start();
event.target.innerText = 'pause';
} else {
pause();
event.target.innerText = 'start';
}
}
function start(){
// First use pause() to be sure all intervals are cleared
// it prevents them from doubling up
pause();
interval = setInterval( count, 1000 );
}
function pause() {
clearInterval( interval );
interval = null;
}
function print(){
// I have separated out the print function as we want to use it
// in the count and the cancel function
var [ hours, minutes, seconds ] = time;
if( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval( interval );
}
if (seconds < 10) {
outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}
function count(){
// By doing this before declaring your variables
// you make it so the variables actually hold the new calculated values.
time[2]--;
if( time[2] == -1 ){
time[1]--;
time[2] = 59;
}
print();
}
// Lets also clearly name our things.
var outputElement = document.getElementById('demo');
var toggleElement = document.getElementById('toggle');
var cancelElement = document.getElementById('cancel');
var interval = null;
var time = [10,10,10];
// Add event listener once
toggleElement.addEventListener( 'click', event_click_startpause );
toggleElement.click();
cancelElement.addEventListener( 'click', event_click_cancel );
}
initCountdown();<button id="toggle">start</button>
<button id="cancel">cancel</button>
<div id="demo"></div>
