等待用户点击而不是页面加载来启动功能
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);
}
});
用于测试的代码笔:
http://codepen.io/Mukul215/pen/obxLev
您将立即调用countdown
函数,而不是将其作为处理程序提供给.on
。
$('#startCountdown').on('click', countdown(sessionConverted));
因为在表达式中使用了括号,所以会立即调用countdown(sessionConverted)
,并将返回值作为处理程序提供给.on
方法。因为返回值不是一个函数,所以click事件实际上没有任何作用。
试试这个:
$('#startCountdown').on('click', function (e) {
countdown(sessionConverted);
});
这可能是因为您已经在$(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);
}
相关文章:
- 如何防止网页加载后自动启动功能
- 在页面启动期间加载图像
- Jquery时间启动计时器,我有一个计时器的代码,但它在页面加载时启动
- 在呈现HTML样式和脚本时加载启动页
- 启动选项卡ajax在加载页面时加载内容
- 初次加载后关闭启动屏幕
- 在 Metro 风格应用中启动时加载数据
- 使用Bookmarklet在Firefox中为asp表单加载启动onclick事件
- 模式视图重新加载内容(启动MVC ASP.NET)
- 视频(自动播放)通过javascript隐藏,但已经在页面加载时启动
- 加载图像后启动转换事件
- 当窗口打开时,IE9在加载前启动事件
- Mozilla Firefox加载项将不会启动
- FileReader未在Ionic 2中加载端启动
- 如何在 Rails 中停止在页面重新加载时重新启动计时器
- TineMCE 不会启动 ajax 加载的文本区域
- JavaScript 在应用程序首次启动时不会加载
- 如何仅在启动选项卡处于活动状态时加载启动选项卡内容
- 加载启动模式后延迟不工作
- 强制为每个访问者加载启动页面