我正在尝试制作一个倒计时时钟，当用户点击按钮时，它会启动计时器。但是，现在，只要页面加载，倒计时就会开始。我怎么能等到用户真正按下id='startCountdown'按钮才能启动countdown。我是JavaScript新手，非常感谢您的反馈。
.js代码：
// Wait for webpage to load
$(document).ready(function(){
var sessionTime = 1;
var breakTime = 5;
// Update session and break times with pre-defined variables
$('#session-time').text(sessionTime);
$('#rest-time').text(breakTime);
// jQuery click functions for increasing and decreasing time
$('#decrease-session').on('click', downSession);
$('#increase-session').on('click', upSession);
$('#decrease-rest').on('click', downBreak);
$('#increase-rest').on('click', upBreak);
// Decrease the length of each session
function downSession() {
sessionTime--;
$('#session-time').text(sessionTime);
$('#countdown-time').text(sessionTime);
}
// Increase the length of each session
function upSession() {
sessionTime++;
$('#session-time').text(sessionTime);
$('#countdown-time').text(sessionTime);
}
// Decrease the length of each break
function downBreak() {
breakTime--;
$('#rest-time').text(breakTime);
}
// Increase the length of each break
function upBreak() {
breakTime++;
$('#rest-time').text(breakTime);
}
// Convert session and break times to seconds
var sessionConverted = sessionTime * 60;
var breakConverted = breakTime * 60;
// When clicked, send to start countdown
$('#startCountdown').on('click', countdown(sessionConverted));
// Convert time and return in H:M:S
function convertTime(time) {
time = parseInt(time, 10);
var hours = Math.floor(time / 3600);
var minutes = Math.floor((time % 3600) / 60);
var seconds = Math.floor((time % 3600) % 60);
return {
'H': hours,
'M': minutes,
'S': seconds
};
}
// Interval function that will decrement the time
function countdown(count) {
var timerId = setInterval(function() {
// Decrement the count
count--;
// Send count to convertTime to display
var t = convertTime(count);
var hours = 0;
var mins = 0;
var secs = 0;
// If statements to check if time is less than 10
// If so, add leading "0"
(t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
(t['M'] < 10) ? (mins = "0" + t['M']) : (mins = t['M']);
(t['S'] < 10) ? (secs = "0" + t['S']) : (secs = t['S']);
if (hours >= 1) {
$('#countdown-time').text(hours + ":" + mins + ":" + secs);
} else {
$('#countdown-time').text(mins + ":" + secs);
}
// Stop counting if the count has reached "0"
if(count < 1) {
clearInterval(timerId);
}
}, 1000);
}
});
用于测试的Codepen：
答案 0 :(得分：6)
您正在立即调用countdown函数，而不是将其作为处理程序提供给.on。
$('#startCountdown').on('click', countdown(sessionConverted));
因为在表达式中使用括号，所以会立即调用countdown(sessionConverted)并将返回值作为.on方法的处理程序提供。并且由于返回值不是函数，因此click事件实际上不会执行任何操作。
试试这个：
$('#startCountdown').on('click', function (e) {
countdown(sessionConverted);
});
答案 1 :(得分：-1)
这可能是因为您已在$(document).ready(function(){})
尝试删除$(document).ready(function(){})功能之外的点击事件。试试下面给出的代码：
var sessionTime;
var breakTime;
// Wait for webpage to load
$(document).ready(function () {
sessionTime = 1;
breakTime = 5;
// Update session and break times with pre-defined variables
$('#session-time').text(sessionTime);
$('#rest-time').text(breakTime);
// jQuery click functions for increasing and decreasing time
$('#decrease-session').on('click', downSession);
$('#increase-session').on('click', upSession);
$('#decrease-rest').on('click', downBreak);
$('#increase-rest').on('click', upBreak);
// When clicked, send to start countdown
$('#startCountdown').on('click', countdown(sessionConverted));
});
// Decrease the length of each session
function downSession() {
sessionTime--;
$('#session-time').text(sessionTime);
$('#countdown-time').text(sessionTime);
}
// Increase the length of each session
function upSession() {
sessionTime++;
$('#session-time').text(sessionTime);
$('#countdown-time').text(sessionTime);
}
// Decrease the length of each break
function downBreak() {
breakTime--;
$('#rest-time').text(breakTime);
}
// Increase the length of each break
function upBreak() {
breakTime++;
$('#rest-time').text(breakTime);
}
// Convert session and break times to seconds
var sessionConverted = sessionTime * 60;
var breakConverted = breakTime * 60;
// Convert time and return in H:M:S
function convertTime(time) {
time = parseInt(time, 10);
var hours = Math.floor(time / 3600);
var minutes = Math.floor((time % 3600) / 60);
var seconds = Math.floor((time % 3600) % 60);
return {
'H': hours,
'M': minutes,
'S': seconds
};
}
// Interval function that will decrement the time
function countdown(count) {
var timerId = setInterval(function () {
// Decrement the count
count--;
// Send count to convertTime to display
var t = convertTime(count);
var hours = 0;
var mins = 0;
var secs = 0;
// If statements to check if time is less than 10
// If so, add leading "0"
(t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
(t['M'] < 10) ? (mins = "0" + t['M']) : (mins = t['M']);
(t['S'] < 10) ? (secs = "0" + t['S']) : (secs = t['S']);
if (hours >= 1) {
$('#countdown-time').text(hours + ":" + mins + ":" + secs);
} else {
$('#countdown-time').text(mins + ":" + secs);
}
// Stop counting if the count has reached "0"
if (count < 1) {
clearInterval(timerId);
}
}, 1000);
}