[英]Wait for user click rather than page load to start function
我目前正在尝试制作一个倒计时时钟,当用户单击按钮时将启动计时器。 但是,目前,页面载入后立即开始倒数计时。 我如何才能等到用户实际按下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测试:
您将立即调用countdown
功能,而不是将其作为处理程序提供给.on
。
$('#startCountdown').on('click', countdown(sessionConverted));
因为您在表达式中使用括号,所以将立即调用countdown(sessionConverted)
并将返回值作为处理程序提供给.on
方法。 而且由于返回值不是函数,因此click事件实际上不会执行任何操作。
尝试这个:
$('#startCountdown').on('click', function (e) {
countdown(sessionConverted);
});
这可能是因为您已在$(document).ready(function(){})
内编写了所有代码。
尝试删除$(document).ready(function(){})
函数外部的click事件。 尝试下面给出的代码:
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.