重金求解 实现倒计时器

janeweixiao 2008-05-26 04:40:58
我在编一个在线考试系统，第一个页面中有“开始考试”按钮，
希望点击此按钮后，在打开的第二个页面中显示一个倒计时器，时间为60分钟。


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

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

即，如果能实现全部要求，总分为280分
...全文
612 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
janeweixiao 2008-05-27
  • 打赏
  • 举报
 回复
lawrendc请进http://topic.csdn.net/u/20080527/21/9df305f5-cbe5-4d1d-bef0-df168a08b59e.html

抱歉，是我打错了

第一次在这里发帖，不懂规矩。请大家多多包涵吧
cceon 2008-05-27
  • 打赏
  • 举报
 回复
楼上，楼上，楼上，楼上的方法都很好，
但是似乎忘记了一个问题

脚本如何防止别人刷新？

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

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

至于时间到了以后，用JS脚本提交父页面FORM就是了。
希望对楼主有所帮助
gzdiablo 2008-05-27
  • 打赏
  • 举报
 回复 
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();
lawrendc 2008-05-27
  • 打赏
  • 举报
 回复
这样就有点招摇了
janeweixiao 2008-05-27
  • 打赏
  • 举报
 回复
非常感谢各位高手的解答，6楼和15楼的代码都不错，以我的能力分不出优劣。所以准备给给你们各加100分
此帖只能加100分，我会开其他的加分帖，请6楼和15楼的高手关注
s_liangchao1s 2008-05-27
  • 打赏
  • 举报
 回复 


<!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>
s_liangchao1s 2008-05-27
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 janeweixiao 的回复:]
非常感谢各位大大的不吝赐教

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

<!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>
我当时只是给你例子 没放到控件
janeweixiao 2008-05-26
  • 打赏
  • 举报
 回复
非常感谢各位大大的不吝赐教

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

先在这里谢过，因为发帖一天后才能追加分数，大概明天这个时候我会过来加分。
在此之前，各位大大还可以继续赐教
joegu 2008-05-26
  • 打赏
  • 举报
 回复 




<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
大概这个思路。
Ngufer 2008-05-26
  • 打赏
  • 举报
 回复
s_liangchao1s 的代码看着真舒服....
yzsunlight 2008-05-26
  • 打赏
  • 举报
 回复
<!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>
一把编程的菜刀 2008-05-26
  • 打赏
  • 举报
 回复
倒计时与是不是JSP没什么太大关系！！
一把编程的菜刀 2008-05-26
  • 打赏
  • 举报
 回复
刀计时和自动交卷都是超简单的问题！！
如果在你加分满还没有人实现的话
我再把答案告诉你吧
s_liangchao1s 2008-05-26
  • 打赏
  • 举报
 回复
下班了 明天来看
lawrendc 2008-05-26
  • 打赏
  • 举报
 回复
自动交卷？？ 恩
lawrendc 2008-05-26
  • 打赏
  • 举报
 回复
简单实现：





<!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>
s_liangchao1s 2008-05-26
  • 打赏
  • 举报
 回复
交卷的jsp你想怎么实现？
s_liangchao1s 2008-05-26
  • 打赏
  • 举报
 回复 


<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>
加载更多回复（3）
PHP实现倒计时
2019独角兽企业重金招聘Python工程师标准>>> ...
VB中如何timer 控件进行倒计时
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript 实现倒计时(10秒)自动关闭网页
2019独角兽企业重金招聘Python工程师标准>>> ...
订单倒计时取消，nodejs 辅助实现倒计时任务
2019独角兽企业重金招聘Python工程师标准>>> ...
按钮点击-30秒钟Jquery倒计时实现
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章