重金求解 实现倒计时器

时间:2022-06-25 12:11:34
我在编一个在线考试系统,第一个页面中有“开始考试”按钮,
希望点击此按钮后,在打开的第二个页面中显示一个倒计时器,时间为60分钟。


如果能实现:倒计时完成后,自动给用户交卷。还将继续追加40分数。

如果能使用JSP,也会追加40分数

即,如果能实现全部要求,总分为280分

23 个解决方案

#1


因为新手不能一次性发太多分,我会在第一时间把分追加到200分的

请高手帮忙,最好有详细的代码,谢谢

#2


想想

#3


setInterval

#4



<script>   
  var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.body.innerText   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   
  </script>   
  <body   onload="countTime()">   
  </body>

#5


交卷的jsp你想怎么实现?

#6


简单实现:



<!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> 
<script type="text/JavaScript"> 
 var lastMinutes=59;
 var lastSeconds=60;
 var t,stingTime;
 function showTime(){
 document.getElementById("hehe").disabled=true;
 var allTime=60*60*1000;
 lastSeconds--;
 if(lastSeconds==0 && lastMinutes==0){
clearTimeout(t);
return;
 }
else  if(lastSeconds<0){
  lastSeconds=59;
lastMinutes--;
 }
 
 stringTime="还剩时间为:"+lastMinutes+" : "+lastSeconds;
 document.getElementById("timeDiv").innerHTML=stringTime;
  setTimeout(showTime,1000);
}
</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='showTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>

#7


自动交卷?? 恩

#8


下班了 明天来看

#9


刀计时和自动交卷都是超简单的问题!!
如果在你加分满还没有人实现的话
我再把答案告诉你吧

#10


倒计时与是不是JSP没什么太大关系!!

#11


<!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>
<title>邮件帐户信息</title>
<script language="javascript">
var min=1;//声明一个变量控制分钟,给定时器设定一个值
var sec=0;//生命一个变量控制秒数,给它富一个值
function jishi()//自定义一个函数来实现页面的倒记时
{
 document.myform.time.value=min+"分"+sec+"秒";//将值赋给myform表单中的中的的名为time的元素
 if(min==0&&sec==0)//判断是否到时间为0,为0则关闭页面
 {
window.close();
clearTimeout("setTimeout()");
 }
 if(sec==0)//判断秒数是否为0,若为0则分钟减1
 {
sec=60;
min--;
 }
 sec--;
 setTimeout("jishi()",1000);//用来实现页面的刷新
 }

</script>

</head>

<body onload="jishi()" action="" method="post">
<form enctype="multipart/form-data" name="myform" onsubmit="return check()">
<table align="center" >还有<input type="text" name="time" class="jishi" readonly>将关闭窗口</table>

</form>
</body>
</html>

#12


s_liangchao1s  的代码看着真舒服....

#13




<script>
function gominutes() {
   
if (document.main.minutes.value == 0){
document.main.action = "test.jsp";
                document.main.submit();
}else{
document.main.minutes.value = eval(document.main.minutes.value + "-1");
window.setTimeout("gominutes()", 1000);//这个是1秒
}

}

</script>
<body  onload="gominutes();">
<form name="main">
<table>
<tr>
         <td colspan=10 valign=bottom><font color="#ff0000"><b>当前页面每60秒会自动刷新一次:</b></font><input type="text" name="minutes" value="61" style="border=0;color=#4242FF;vertical-align=center;font-weight:bold" readonly size=2></td>
        </tr>

</table>
</form>



提交的页面是test.jsp
大概这个思路。

#14


非常感谢各位大大的不吝赐教

大概是我水平不高的缘故,4楼的代码插入后,浏览器上没显示任何内容。
6楼的代码效果非常好,
11楼和13楼大大的代码也能成功显现出倒计时。

先在这里谢过,因为发帖一天后才能追加分数,大概明天这个时候我会过来加分。
在此之前,各位大大还可以继续赐教

#15


引用 14 楼 janeweixiao 的回复:
非常感谢各位大大的不吝赐教 

大概是我水平不高的缘故,4楼的代码插入后,浏览器上没显示任何内容。 


<!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> 
<script type="text/JavaScript"> 

 var stingTime;
 var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
   document.getElementById("hehe").disabled=true;

  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.getElementById("timeDiv").innerHTML   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   

</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='countTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>
我当时只是给你例子 没放到控件

#16



<!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> 
<script type="text/JavaScript"> 

 var stingTime;
 var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
   document.getElementById("hehe").disabled=true;

  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.getElementById("timeDiv").innerHTML   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   

</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='countTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>


#17


String.prototype.toInt=function(){if(/(-?\d+)/.test(this)){return parseInt(RegExp.$1);}else{return 0;}}

//类
var System = {
clock:function(inittime)
{
this.timespan = 0;
var re = /(\d+)h|(\d+)m|(\d+)s/ig;
while(re.exec(inittime))
{
this.timespan += RegExp.$1.toInt()*3600;
this.timespan += RegExp.$2.toInt()*60;
this.timespan += RegExp.$3.toInt();
}
this._ti = null;
}
};
System.clock.prototype = {
//启动方法
run:function(){
var This = this;
this.clock1 = new Date();
this.clock2 = new Date(this.clock1.valueOf() + (this.timespan * 1000));
var tick = function(){
var tl = (This.clock2-new Date());
if((typeof This.ontick)=="function")
This.ontick();
if(tl<0)
{
window.clearInterval(This._ti);
if((typeof This.onend)=="function")This.onend();
tick = null;
}
}
this._ti = window.setInterval(tick,200);
},
//获取剩余毫秒
getTimeLeft:function(){return (a=(this.clock2-new Date()))>=0?a:0;},
//获取经过毫秒
getTimeRun:function(){return (a=(new Date()-this.clock1))>=0?a:0;},
//获取剩余秒
getSecondsLeft:function(){return Math.floor(this.getTimeLeft()/1000);},
//获取经过秒
getSecondsRun:function(){return Math.floor(this.getTimeRun()/1000);},
//获取剩余分钟
getMinutesLeft:function(){return Math.floor(this.getTimeLeft()/60000);},
//获取经过分钟
getMinutesRun:function(){return Math.floor(this.getTimeRun()/60000);},
//获取剩余小时
getHoursLeft:function(){return Math.floor(this.getTimeLeft()/3600000);},
//获取经过小时
getHoursRun:function(){return Math.floor(this.getTimeRun()/3600000);}
}


//调用

//初始化时钟 (参数:时钟时间  1h:1小时 10m:10分 23s:23秒 ["10m23s" "10h80m" "10m" "100s"]都可以)
var aa = new System.clock("1h10m23s");
//绑定 时钟每心跳事件
aa.ontick = function(){
//这里是每次心跳时执行的方法  this.getMinutesLeft() % 60 是取当前剩余分钟数 并且取60的模
document.body.innerHTML =[this.getHoursLeft(),this.getMinutesLeft() % 60,this.getSecondsLeft() % 60].join(":");
}
//绑定 时钟结束事件
aa.onend = function(){
//这里是倒计时完成时 使用的方法
alert("时间到");
}
//开始跑
aa.run();

#19


非常感谢各位高手的解答,6楼和15楼的代码都不错,以我的能力分不出优劣。所以准备给给你们各加100分
此帖只能加100分,我会开其他的加分帖,请6楼和15楼的高手关注

#20


这样就有点招摇了 

#22


楼上,楼上,楼上,楼上的方法都很好,
但是似乎忘记了一个问题

脚本如何防止别人刷新?

我觉得登录后应该记录该用户的编号在SESSION中。

考试页面包含一个框架页面,这个框架里面的页面每分钟刷一次足够了(每秒在那里动也给考试的人太大压力了)
当然这个页面记录的60分钟是记录在SESSION里面的,这样既能防刷新,也能实现功能

至于时间到了以后,用JS脚本提交父页面FORM就是了。
希望对楼主有所帮助

#23


lawrendc请进 http://topic.csdn.net/u/20080527/21/9df305f5-cbe5-4d1d-bef0-df168a08b59e.html

抱歉,是我打错了

第一次在这里发帖,不懂规矩。请大家多多包涵吧

#1


因为新手不能一次性发太多分,我会在第一时间把分追加到200分的

请高手帮忙,最好有详细的代码,谢谢

#2


想想

#3


setInterval

#4



<script>   
  var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.body.innerText   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   
  </script>   
  <body   onload="countTime()">   
  </body>

#5


交卷的jsp你想怎么实现?

#6


简单实现:



<!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> 
<script type="text/JavaScript"> 
 var lastMinutes=59;
 var lastSeconds=60;
 var t,stingTime;
 function showTime(){
 document.getElementById("hehe").disabled=true;
 var allTime=60*60*1000;
 lastSeconds--;
 if(lastSeconds==0 && lastMinutes==0){
clearTimeout(t);
return;
 }
else  if(lastSeconds<0){
  lastSeconds=59;
lastMinutes--;
 }
 
 stringTime="还剩时间为:"+lastMinutes+" : "+lastSeconds;
 document.getElementById("timeDiv").innerHTML=stringTime;
  setTimeout(showTime,1000);
}
</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='showTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>

#7


自动交卷?? 恩

#8


下班了 明天来看

#9


刀计时和自动交卷都是超简单的问题!!
如果在你加分满还没有人实现的话
我再把答案告诉你吧

#10


倒计时与是不是JSP没什么太大关系!!

#11


<!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>
<title>邮件帐户信息</title>
<script language="javascript">
var min=1;//声明一个变量控制分钟,给定时器设定一个值
var sec=0;//生命一个变量控制秒数,给它富一个值
function jishi()//自定义一个函数来实现页面的倒记时
{
 document.myform.time.value=min+"分"+sec+"秒";//将值赋给myform表单中的中的的名为time的元素
 if(min==0&&sec==0)//判断是否到时间为0,为0则关闭页面
 {
window.close();
clearTimeout("setTimeout()");
 }
 if(sec==0)//判断秒数是否为0,若为0则分钟减1
 {
sec=60;
min--;
 }
 sec--;
 setTimeout("jishi()",1000);//用来实现页面的刷新
 }

</script>

</head>

<body onload="jishi()" action="" method="post">
<form enctype="multipart/form-data" name="myform" onsubmit="return check()">
<table align="center" >还有<input type="text" name="time" class="jishi" readonly>将关闭窗口</table>

</form>
</body>
</html>

#12


s_liangchao1s  的代码看着真舒服....

#13




<script>
function gominutes() {
   
if (document.main.minutes.value == 0){
document.main.action = "test.jsp";
                document.main.submit();
}else{
document.main.minutes.value = eval(document.main.minutes.value + "-1");
window.setTimeout("gominutes()", 1000);//这个是1秒
}

}

</script>
<body  onload="gominutes();">
<form name="main">
<table>
<tr>
         <td colspan=10 valign=bottom><font color="#ff0000"><b>当前页面每60秒会自动刷新一次:</b></font><input type="text" name="minutes" value="61" style="border=0;color=#4242FF;vertical-align=center;font-weight:bold" readonly size=2></td>
        </tr>

</table>
</form>



提交的页面是test.jsp
大概这个思路。

#14


非常感谢各位大大的不吝赐教

大概是我水平不高的缘故,4楼的代码插入后,浏览器上没显示任何内容。
6楼的代码效果非常好,
11楼和13楼大大的代码也能成功显现出倒计时。

先在这里谢过,因为发帖一天后才能追加分数,大概明天这个时候我会过来加分。
在此之前,各位大大还可以继续赐教

#15


引用 14 楼 janeweixiao 的回复:
非常感谢各位大大的不吝赐教 

大概是我水平不高的缘故,4楼的代码插入后,浏览器上没显示任何内容。 


<!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> 
<script type="text/JavaScript"> 

 var stingTime;
 var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
   document.getElementById("hehe").disabled=true;

  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.getElementById("timeDiv").innerHTML   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   

</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='countTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>
我当时只是给你例子 没放到控件

#16



<!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> 
<script type="text/JavaScript"> 

 var stingTime;
 var   timeLeft   =   60   *   60   *   1000;   
  function   countTime()   
  {   
   document.getElementById("hehe").disabled=true;

  if(timeLeft   ==   0)   
  {   
          alert("时间到!");   
          return;   
  }   
          var   startMinutes   =   parseInt(timeLeft   /   (60   *   1000),   10);   
          var   startSec   =   parseInt((timeLeft   -   startMinutes   *   60   *   1000)/1000)   
          document.getElementById("timeDiv").innerHTML   =   "剩余时间:"   +   startMinutes   +   "分钟"   +   startSec   +   "秒";   
          timeLeft   =   timeLeft   -   1000;   
          setTimeout('countTime()',1000);   
  }   

</script> </head> 
<body> 
<input type='button' value='开始考试' onclick='countTime();' id='hehe'>
<div id='timeDiv'></div>
 </body> </html>


#17


String.prototype.toInt=function(){if(/(-?\d+)/.test(this)){return parseInt(RegExp.$1);}else{return 0;}}

//类
var System = {
clock:function(inittime)
{
this.timespan = 0;
var re = /(\d+)h|(\d+)m|(\d+)s/ig;
while(re.exec(inittime))
{
this.timespan += RegExp.$1.toInt()*3600;
this.timespan += RegExp.$2.toInt()*60;
this.timespan += RegExp.$3.toInt();
}
this._ti = null;
}
};
System.clock.prototype = {
//启动方法
run:function(){
var This = this;
this.clock1 = new Date();
this.clock2 = new Date(this.clock1.valueOf() + (this.timespan * 1000));
var tick = function(){
var tl = (This.clock2-new Date());
if((typeof This.ontick)=="function")
This.ontick();
if(tl<0)
{
window.clearInterval(This._ti);
if((typeof This.onend)=="function")This.onend();
tick = null;
}
}
this._ti = window.setInterval(tick,200);
},
//获取剩余毫秒
getTimeLeft:function(){return (a=(this.clock2-new Date()))>=0?a:0;},
//获取经过毫秒
getTimeRun:function(){return (a=(new Date()-this.clock1))>=0?a:0;},
//获取剩余秒
getSecondsLeft:function(){return Math.floor(this.getTimeLeft()/1000);},
//获取经过秒
getSecondsRun:function(){return Math.floor(this.getTimeRun()/1000);},
//获取剩余分钟
getMinutesLeft:function(){return Math.floor(this.getTimeLeft()/60000);},
//获取经过分钟
getMinutesRun:function(){return Math.floor(this.getTimeRun()/60000);},
//获取剩余小时
getHoursLeft:function(){return Math.floor(this.getTimeLeft()/3600000);},
//获取经过小时
getHoursRun:function(){return Math.floor(this.getTimeRun()/3600000);}
}


//调用

//初始化时钟 (参数:时钟时间  1h:1小时 10m:10分 23s:23秒 ["10m23s" "10h80m" "10m" "100s"]都可以)
var aa = new System.clock("1h10m23s");
//绑定 时钟每心跳事件
aa.ontick = function(){
//这里是每次心跳时执行的方法  this.getMinutesLeft() % 60 是取当前剩余分钟数 并且取60的模
document.body.innerHTML =[this.getHoursLeft(),this.getMinutesLeft() % 60,this.getSecondsLeft() % 60].join(":");
}
//绑定 时钟结束事件
aa.onend = function(){
//这里是倒计时完成时 使用的方法
alert("时间到");
}
//开始跑
aa.run();

#18


#19


非常感谢各位高手的解答,6楼和15楼的代码都不错,以我的能力分不出优劣。所以准备给给你们各加100分
此帖只能加100分,我会开其他的加分帖,请6楼和15楼的高手关注

#20


这样就有点招摇了 

#21


#22


楼上,楼上,楼上,楼上的方法都很好,
但是似乎忘记了一个问题

脚本如何防止别人刷新?

我觉得登录后应该记录该用户的编号在SESSION中。

考试页面包含一个框架页面,这个框架里面的页面每分钟刷一次足够了(每秒在那里动也给考试的人太大压力了)
当然这个页面记录的60分钟是记录在SESSION里面的,这样既能防刷新,也能实现功能

至于时间到了以后,用JS脚本提交父页面FORM就是了。
希望对楼主有所帮助

#23


lawrendc请进 http://topic.csdn.net/u/20080527/21/9df305f5-cbe5-4d1d-bef0-df168a08b59e.html

抱歉,是我打错了

第一次在这里发帖,不懂规矩。请大家多多包涵吧