我有一个JavaScript函数来倒计时计时器.所以我想在此功能中添加暂停选项.我尝试过这种方式
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>倒数计时器正常工作.但是暂停选项不起作用.因此,我该如何更正此脚本.有人能帮我吗.
解决方法:
尽管您的代码可以正常工作,但我想指出两点：在间隔中添加暂停处理程序不是一个好主意,您将在每个间隔中添加一个暂停处理程序,因此最终您只是将单击时要处理的功能数量.我已经使您的按钮切换,并将事件侦听器分离为处理函数,以便可以将其附加到任何按钮.这些更改将使您的代码保持流畅的工作状态,同时也更易于理解：
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>