87,917
社区成员
发帖
与我相关
我的任务
分享一个倒计时的问题，希望得到大神的帮助！
一个单选题的答题倒计时问题，切换到下一题后，时间不同步。
每一道题都有30s倒计时，用户不操作的话，倒计时完了，自动切换进入下一道题。
如果用户操作（选中）后，自动切换到下一题，然后倒计时从30s开始，如此反复。
现在的情况是，如果我选中后进入下一题，会出现两个倒计时，切换的效果，程序按照上一题的？？？
演示地址：http://test.xiaoshenzhen.com/dati08
恳求大神帮忙修改修改，多谢！
每一道题都有30s倒计时，用户不操作的话，倒计时完了，自动切换进入下一道题。
如果用户操作（选中）后，自动切换到下一题，然后倒计时从30s开始，如此反复。
现在的情况是，如果我选中后进入下一题，会出现两个倒计时，切换的效果，程序按照上一题的？？？
演示地址：http://test.xiaoshenzhen.com/dati08
恳求大神帮忙修改修改，多谢！
var m=1;
var n=1;
var p=4;
var j=1;
var dui=0;
var cuo=0;
var t;
var printnr;
var datis = <?php echo $row['dati_num'] ?>; //试题数量
var secs = <?php echo $row['dati_time'] ?>; //每道题的答题时间
function showtime(){
document.getElementById("opt"+ m +"").style.display = 'block'; //显示试题列表
document.getElementById("anniu").style.display = 'none'; //隐藏按钮
for(j=1; j <= secs; j++) {
t = window.setTimeout("update(" + j + "," + secs + ")", j * 1000);
}
}
function paiming(){
document.getElementById("ranktop").style.display = 'block'; //显示排名模块
}
function update(num,secs) {
if(num == secs) {
document.getElementById("dd"+ n +"").innerHTML = 0; //时间倒计时到了归0
document.getElementById("opt"+ m +"").style.display = 'none'; //隐藏当前试题
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
}
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
showtime();
}
else {
printnr = secs-num;
document.getElementById("dd"+ n +"").innerHTML = printnr;
}
}
function aClick(obj){
//alert(obj.alt);
xuanze = obj.id;
ans = obj.title;
if(xuanze === ans)
{
var popInner = obj.parentNode.parentNode.parentNode.parentNode;
var panDuan = obj.parentNode.parentNode.parentNode;
popInner.style.display = 'none'; //隐藏当前试题
document.getElementById("goodjob").style.display = 'block'; //显示回答正确的图片
//popInner.style.backgroundImage ="url(images/rightbg.jpg)no-repeat;";
dui = dui + 1;
setTimeout(function(){
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
document.getElementById("goodjob").style.display = 'none';
document.getElementById("wrongNo").value = cuo; //赋值给隐藏域，错题数
document.getElementById("rightNo").value = dui; //赋值给隐藏域，对题数
document.getElementById('wrong').innerHTML = cuo; //赋值给div，错题数
document.getElementById('right').innerHTML = dui; //赋值给div，对题数
oneti = 100 / datis; //计算一道题的平均分
scores = parseInt(dui * oneti) ; //计算最终成绩，取整数
document.getElementById('scores').innerHTML = scores; //赋值给div，最终成绩
document.getElementById("score").value = scores; //赋值给隐藏域，最终成绩
if(scores < 60){
document.getElementById("show_tip_1").style.display = 'block'; //0-59分
}
if(scores > 59 && scores < 80){
document.getElementById("show_tip_2").style.display = 'block'; //60-79分
}
if(scores > 79 && scores < 100){
document.getElementById("show_tip_3").style.display = 'block'; //80-99分
}
if(scores == 100){
document.getElementById("show_tip_4").style.display = 'block'; //等于100分
}
}
document.getElementById("goodjob").style.display = 'none';
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
showtime();
},1500); //1.5秒钟后，自动切换到下一题
}
else
{
var popInner = obj.parentNode.parentNode.parentNode.parentNode;
var panDuan = obj.parentNode.parentNode.parentNode;
popInner.style.display = 'none'; //隐藏当前试题
document.getElementById("bad").style.display = 'block'; //显示回答错误的图片
//popInner.style.backgroundImage ="url(images/rightbg.jpg)no-repeat;";
cuo = cuo + 1;
setTimeout(function(){
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
document.getElementById("bad").style.display = 'none';
document.getElementById("wrongNo").value = cuo; //赋值给隐藏域，错题数
document.getElementById("rightNo").value = dui; //赋值给隐藏域，对题数
document.getElementById('wrong').innerHTML = cuo; //赋值给div，错题数
document.getElementById('right').innerHTML = dui; //赋值给div，对题数
oneti = 100 / datis; //计算一道题的平均分
scores = parseInt(dui * oneti) ; //计算最终成绩，取整数
document.getElementById('scores').innerHTML = scores; //赋值给div，最终成绩
document.getElementById("score").value = scores; //赋值给隐藏域，最终成绩
if(scores < 60){
document.getElementById("show_tip_1").style.display = 'block'; //0-59分
}
if(scores > 59 && scores < 80){
document.getElementById("show_tip_2").style.display = 'block'; //60-79分
}
if(scores > 79 && scores < 90){
document.getElementById("show_tip_3").style.display = 'block'; //80-89分
}
if(scores > 89){
document.getElementById("show_tip_4").style.display = 'block'; //90-100分
}
}
document.getElementById("bad").style.display = 'none';
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
showtime();
},1500); //1.5秒钟后，自动切换到下一题
}
}
...全文
请发表友善的回复…
发表回复
迅发网络 2016-05-20
- 打赏
- 举报
还是不行~ 
hch126163 2016-05-20
- 打赏
- 举报
for(j=1; j <= secs; j++) {
t = window.setTimeout("update(" + j + "," + secs + ")", j * 1000);
}
这个逻辑严重的问题
一次创建了secs个 setTimeout
应该使用递归：
function showtime(j){
document.getElementById("opt"+ m +"").style.display = 'block'; //显示试题列表
document.getElementById("anniu").style.display = 'none'; //隐藏按钮
j=j||1;
if(j <= secs){
setTimeout(function(){update( j ", secs );showtime(j++);}, 1000);
}
}
迅发网络 2016-05-20
- 打赏
- 举报
嘿嘿，程序结构是有点乱，但是目前勉强还可以跑起来！！！
我有清除过计时器，但是进入到下一题后，倒计时跑步起来了。。。
瑞卡哥哥 2016-05-20
- 打赏
- 举报
伪代码吧。
1.展示第一题，启动计时器
2.操作或时间到 切换下一题
3.题目完了结束（其他逻辑）
切换下一题 细分为
1.隐藏当前题目
2.显示下一个题目
3..结束计时器（clearTimeout）
3.启动新的计时器
其中 你应该封装起来的是切换下一题这个整体操作 而不仅仅是显示时间
迅发网络 2016-05-20
- 打赏
- 举报
新手，见谅！！！
瑞卡哥哥 2016-05-20
- 打赏
- 举报
看的出来 你的思路一片混乱
迅发网络 2016-05-20
- 打赏
- 举报
完美收工！感谢各位大神，特别感谢MengYouXuanLv，你的最有效率，按照你的修改，一气呵成。散分啦！！！
allali 2016-05-20
- 打赏
- 举报
哥，流程对了，但是。。。。你这个倒计时跑的不正常啊，过了好几秒才-1s？？？[/quote]
t = window.setTimeout("update(" + j + "," + secs + ")", 1000);
迅发网络 2016-05-20
- 打赏
- 举报
UP!!!!! 在线等！！！急急急！！！
迅发网络 2016-05-20
- 打赏
- 举报
哥，流程对了，但是。。。。你这个倒计时跑的不正常啊，过了好几秒才-1s？？？
allali 2016-05-20
- 打赏
- 举报
var m=1;
var n=1;
var p=4;
var j=1;
var dui=0;
var cuo=0;
var t;
var printnr;
var datis = <?php echo $row['dati_num'] ?>; //试题数量
var secs = <?php echo $row['dati_time'] ?>; //每道题的答题时间
function showtime(){
if(j==1){
document.getElementById("opt"+ m +"").style.display = 'block'; //显示试题列表
document.getElementById("anniu").style.display = 'none'; //隐藏按钮
}
t = window.setTimeout("update(" + j + "," + secs + ")", j * 1000);
}
function paiming(){
document.getElementById("ranktop").style.display = 'block'; //显示排名模块
}
function update(num,secs) {
if(num == secs) {
document.getElementById("dd"+ n +"").innerHTML = 0; //时间倒计时到了归0
document.getElementById("opt"+ m +"").style.display = 'none'; //隐藏当前试题
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
}
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
j=1;
showtime();
}
else {
printnr = secs-num;
document.getElementById("dd"+ n +"").innerHTML = printnr;
j++;
showtime();
}
}
function aClick(obj){
//alert(obj.alt);
clearTimeout(t) ;
xuanze = obj.id;
ans = obj.title;
if(xuanze === ans)
{
var popInner = obj.parentNode.parentNode.parentNode.parentNode;
var panDuan = obj.parentNode.parentNode.parentNode;
popInner.style.display = 'none'; //隐藏当前试题
document.getElementById("goodjob").style.display = 'block'; //显示回答正确的图片
//popInner.style.backgroundImage ="url(images/rightbg.jpg)no-repeat;";
dui = dui + 1;
setTimeout(function(){
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
document.getElementById("goodjob").style.display = 'none';
document.getElementById("wrongNo").value = cuo; //赋值给隐藏域，错题数
document.getElementById("rightNo").value = dui; //赋值给隐藏域，对题数
document.getElementById('wrong').innerHTML = cuo; //赋值给div，错题数
document.getElementById('right').innerHTML = dui; //赋值给div，对题数
oneti = 100 / datis; //计算一道题的平均分
scores = parseInt(dui * oneti) ; //计算最终成绩，取整数
document.getElementById('scores').innerHTML = scores; //赋值给div，最终成绩
document.getElementById("score").value = scores; //赋值给隐藏域，最终成绩
if(scores < 60){
document.getElementById("show_tip_1").style.display = 'block'; //0-59分
}
if(scores > 59 && scores < 80){
document.getElementById("show_tip_2").style.display = 'block'; //60-79分
}
if(scores > 79 && scores < 100){
document.getElementById("show_tip_3").style.display = 'block'; //80-99分
}
if(scores == 100){
document.getElementById("show_tip_4").style.display = 'block'; //等于100分
}
}
document.getElementById("goodjob").style.display = 'none';
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
j=1;
showtime();
},1500); //1.5秒钟后，自动切换到下一题
}
else
{
var popInner = obj.parentNode.parentNode.parentNode.parentNode;
var panDuan = obj.parentNode.parentNode.parentNode;
popInner.style.display = 'none'; //隐藏当前试题
document.getElementById("bad").style.display = 'block'; //显示回答错误的图片
//popInner.style.backgroundImage ="url(images/rightbg.jpg)no-repeat;";
cuo = cuo + 1;
setTimeout(function(){
m = m+1;
if(m > datis){
document.getElementById("postform").style.display = 'block'; //试题加载完后显示表单填写模块
document.getElementById("bad").style.display = 'none';
document.getElementById("wrongNo").value = cuo; //赋值给隐藏域，错题数
document.getElementById("rightNo").value = dui; //赋值给隐藏域，对题数
document.getElementById('wrong').innerHTML = cuo; //赋值给div，错题数
document.getElementById('right').innerHTML = dui; //赋值给div，对题数
oneti = 100 / datis; //计算一道题的平均分
scores = parseInt(dui * oneti) ; //计算最终成绩，取整数
document.getElementById('scores').innerHTML = scores; //赋值给div，最终成绩
document.getElementById("score").value = scores; //赋值给隐藏域，最终成绩
if(scores < 60){
document.getElementById("show_tip_1").style.display = 'block'; //0-59分
}
if(scores > 59 && scores < 80){
document.getElementById("show_tip_2").style.display = 'block'; //60-79分
}
if(scores > 79 && scores < 90){
document.getElementById("show_tip_3").style.display = 'block'; //80-89分
}
if(scores > 89){
document.getElementById("show_tip_4").style.display = 'block'; //90-100分
}
}
document.getElementById("bad").style.display = 'none';
document.getElementById("opt"+ m +"").style.display = 'block'; //显示下一试题
n = n+1;
j=1;
showtime();
},1500); //1.5秒钟后，自动切换到下一题
}
}
迅发网络 2016-05-20
- 打赏
- 举报
按照你的这个方法改了，但是还是一样的问题，手动选中后，会出现两个计时器。。。。
http://test.xiaoshenzhen.com/dati08[/quote]
哈哈、、、我自己也头疼！谢谢哈！我再试试！
xuzuning 2016-05-20
- 打赏
- 举报
我只讲了计时器初始化的问题，并未涉及其他
如果还有其他地方出现多个计时器的话，也要仿此修改
原则是要保证任何时刻都只有一个计时器在工作
顺便悄悄说一下：你的代码让人看着头疼
迅发网络 2016-05-20
- 打赏
- 举报
按照你的这个方法改了，但是还是一样的问题，手动选中后，会出现两个计时器。。。。
http://test.xiaoshenzhen.com/dati08
xuzuning 2016-05-20
- 打赏
- 举报
你
for(j=1; j <= secs; j++) {
t = window.setTimeout("update(" + j + "," + secs + ")", j * 1000);
}
是错误的！
一次性产生 secs 个定时器的话，如果计时提交前结束（选中了答案），那么之后到期的定时器还会执行吗？答案是肯定的
这就是计时混乱的原因
应这样：
开始答题时
window.setTimeout("update(" + 1 + "," + secs + ")", 1000);
之后在 update 中
if(num < secs) window.setTimeout("update(" + (num+1) + "," + secs + ")", 1000);
