87,910
社区成员
发帖
与我相关
我的任务
分享做了倒计时功能，点击空格触发事件开始倒计时，为什么会延时下啊，请帮忙看看
做了倒计时功能，点击空格触发事件开始倒计时，为什么会延时下啊，请帮忙看看
代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
body {
padding: 0px;
margin: 0px;
}
#time {
font: 280px '微软雅黑';
position: absolute;
left: 50%;
top: 50%;
margin: -180px 0px 0px -325px;
padding: 0;
overflow: hidden;
width: 725px;
height: 360px;
z-index: 1;
color: #000000;
background: #cccccc;
}
.contents {
position: absolute;
bottom: 5px;
left: 5px;
height: 30px;
width: 396px;
}
.content {
display: none;
}
</style>
<script src="js/jquery1.7.1min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
FooterControl();
$(document).keyup(function (event) {
if (event.keyCode == 32) {
var varMinute = $("#hiddlen_minute").val();
OnTimer("#time", 60 * varMinute * 1000);
}
})
});
//执行倒计时
function OnTimer(id, time) {
var remainingTime = time / 1000;
var hour = 0;
var minute = 0;
var second = 0;
//清除事件
var stopCountDown = setInterval(CountDown, 1000);
function CountDown() {
if (remainingTime >= 0) {
hour = Math.floor(remainingTime / 3600);
minute = Math.floor(Math.floor(remainingTime % 3600) / 60);
second = Math.floor(remainingTime % 60);
//转换格式，显示倒计时
var tominute = minute < 10 ? ("0" + minute) : minute;
var tosecond = second < 10 ? ("0" + second) : second;
var formatTime = tominute + ":" + tosecond;
$(id).html(formatTime);
remainingTime--;
} else {
//清除事件,字体变色
clearInterval(stopCountDown);
$("#time").css("color", "red")
}
}
}
function SetTime(strMinute) {
$("#hiddlen_minute").val(strMinute);
if (strMinute < 10)
$("#sp_minute").html("0" + strMinute);
else $("#sp_minute").html(strMinute);
$("#time").css("color", "#000000")
}
//注册控制面板事件
function FooterControl() {
$("#contents").mouseover(function () {
$("#content").show();
}).mouseout(function () {
$("#content").hide();
});
}
</script>
</head>
<body>
<div id="time"><span id="sp_minute">00</span>:00</div>
<div id="contents" class="contents">
<div id="content" class="content">
<input type="button" value="25分钟倒计时" onclick="SetTime(25)" />
<input type="button" value="15分钟倒计时" onclick="SetTime(15)" />
<input type="button" value="3分钟倒计时" onclick="SetTime(3)" />
<input type="text" size="3" maxlength="2" value="0" id="txt_sd" onblur="this.value=parseInt(this.value);if (isNaN(this.value) || this.value<=0){alert('请输入大于0的正整数！');this.focus();};" /><input type="button" id="btn_sd" onclick="javascript: SetTime($('#txt_sd').val())" value="设定" />
<input type="hidden" id="hiddlen_minute" value="0" />
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
嘻哈大咖秀 2014-02-21
- 打赏
- 举报
//执行倒计时
function OnTimer(id, time) {
var remainingTime = time / 1000;
var hour = 0;
var minute = 0;
var second = 0;
//清除事件
CountDown();
var stopCountDown = setInterval(CountDown, 1000);
function CountDown() {
if (remainingTime >= 0) {
--remainingTime;
hour = Math.floor(remainingTime / 3600);
minute = Math.floor(Math.floor(remainingTime % 3600) / 60);
second = Math.floor(remainingTime % 60);
//转换格式，显示倒计时
var tominute = minute < 10 ? ("0" + minute) : minute;
var tosecond = second < 10 ? ("0" + second) : second;
var formatTime = tominute + ":" + tosecond;
$(id).html(formatTime);
} else {
//清除事件,字体变色
clearInterval(stopCountDown);
$("#time").css("color", "red")
}
}
}嘻哈大咖秀 2014-02-21
- 打赏
- 举报
好像没反应啊[/quote]
调用两次试试，看到你代码是在算好时间后才--的。 如果先--再算时间展现到页面那么即时调用一次就行了[/quote]
调用两次就是直接减一秒了 但你多按几次space试试 哈哈 神奇啊
qq137051908 2014-02-21
- 打赏
- 举报
好像没反应啊[/quote]
调用两次试试，看到你代码是在算好时间后才--的。 如果先--再算时间展现到页面那么即时调用一次就行了
嘻哈大咖秀 2014-02-21
- 打赏
- 举报
估计这点停顿是你的程序的执行时间
nitaiyoucala 2014-02-21
- 打赏
- 举报
好像没反应啊
qq137051908 2014-02-21
- 打赏
- 举报
会延迟1秒是因为定时器是1秒执行一次。按照下面试试。
//清除事件
CountDown();//在设置定时前先执行一次
var stopCountDown = setInterval(CountDown, 1000);
nitaiyoucala 2014-02-21
- 打赏
- 举报
var able = true;//定义一个是否可以按键的变量
$(document).ready(function () {
FooterControl();
$(document).keyup(function (event) {
if (event.keyCode == 32) {
if(able){
var varMinute = $("#hiddlen_minute").val();
able = false;//阻止第二次按键
OnTimer("#time", 60 * varMinute * 1000);
}
}
})
});
//清除事件,字体变色
clearInterval(stopCountDown);
$("#time").css("color", "red")
able = true//成功之后恢复可以按键了[/quote]
点击delete建怎么结束当前定时器啊。重置初始的
嘻哈大咖秀 2014-02-21
- 打赏
- 举报
var able = true;//定义一个是否可以按键的变量
$(document).ready(function () {
FooterControl();
$(document).keyup(function (event) {
if (event.keyCode == 32) {
if(able){
var varMinute = $("#hiddlen_minute").val();
able = false;//阻止第二次按键
OnTimer("#time", 60 * varMinute * 1000);
}
}
})
});
//清除事件,字体变色
clearInterval(stopCountDown);
$("#time").css("color", "red")
able = true//成功之后恢复可以按键了
nitaiyoucala 2014-02-21
- 打赏
- 举报
怎么解决多按几次space的bug啊
