[英]Wait for user click rather than page load to start function
I am currently trying to make a countdown clock that will start the timer when the user clicks a button. 我目前正在尝试制作一个倒计时时钟,当用户单击按钮时将启动计时器。 However, right now the countdown starts as soon as the page loads.
但是,目前,页面载入后立即开始倒数计时。 How can I wait until the the user actually presses the
id='startCountdown'
button to start countdown
. 我如何才能等到用户实际按下
id='startCountdown'
按钮开始countdown
。 I am new to JavaScript and would appreciate some feedback. 我是JavaScript新手,不胜感激。
.js code: .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 for testing: Codepen测试:
http://codepen.io/Mukul215/pen/obxLev http://codepen.io/Mukul215/pen/obxLev
You are immediately invoking the countdown
function instead of providing it to .on
as a handler. 您将立即调用
countdown
功能,而不是将其作为处理程序提供给.on
。
$('#startCountdown').on('click', countdown(sessionConverted));
Because you use parentheses in the expression, countdown(sessionConverted)
is immediately invoked and the return value is supplied as the handler to the .on
method. 因为您在表达式中使用括号,所以将立即调用
countdown(sessionConverted)
并将返回值作为处理程序提供给.on
方法。 And because the return value isn't a function, the click event doesn't actually do anything. 而且由于返回值不是函数,因此click事件实际上不会执行任何操作。
Try this: 尝试这个:
$('#startCountdown').on('click', function (e) {
countdown(sessionConverted);
});
This is probably because you have written all the code inside $(document).ready(function(){})
这可能是因为您已在
$(document).ready(function(){})
内编写了所有代码。
Try to to remove the click event outside the $(document).ready(function(){})
function. 尝试删除
$(document).ready(function(){})
函数外部的click事件。 Try the code given below: 尝试下面给出的代码:
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.