想必大家都知道当我进入考试系统是再试卷的一侧会显示,一个规定时间内的倒计时的计时器,那么这个倒计时器是怎样实现的呢,下面我们就分析一下,然后再去具体实现。

首先要想实现这样的功能我们就要知道其中原理是什么,其实原理很简单,就是把规定的时间每隔一秒就减一秒知道减没了也就完了(哈哈,其实说的这些都是废话)。

 

 

下面写一下实现方法:

 

Java代码 复制代码
  1. <body>   
  2. <form  action="路径" method="post" name="form1"></form>//写一个form表单当时间到了之后自动提交   
  3. <input type="text" name="time1" id="time1" disabled="disabled" size="40"/>//显示时间   
  4. <input type="button"  value="开始考试" onclick="startTime(90*60*1000)" id="but1"/>   
  5. //这里我们以90分钟为例   
  6. </body>   
  7.   
  8.   
  9. <script type="text/javascript">   
  10.   
  11.     var time=new Date();   
  12.     document.all.time1.value=time.toLocaleString();   
  13.      var zongtime1=0;//定义递归用的传递实参   
  14.      var ssz=60//定义秒数   
  15.     function startTime(oper){   
  16.        document.getElementById("but1").disabled=true;
  17.        var zongtime=oper//这是总共有多少时间我们换算成毫秒   
  18.        if(oper>0){
  19.        var ohor=Math.floor(zongtime/(60*60*1000));   
  20.          //把总的时间换算出到底有多少小时   
  21.          
  22.        var mine=Math.floor((zongtime-(ohor*60*60*1000))/(60*1000));   
  23.           //除去小时的时间有多少分钟   
  24.        var ss=(Math.floor(zongtime/1000))%60;
  25.         
  26.        }   
  27.        var wancheng=ohor+":"+mine+":"+ss;   
  28.        document.all.time1.value=wancheng;  //把时间写入到页面对应的输入框中   
  29.        zongtime1=zongtime-1000;   
  30.        //alert(zongtime1);   
  31.        var stti=setTimeout("startTime(zongtime1)",1000); //每隔一秒递归调用       
  32.       }
  33.        if(zongtime==0){   
  34.        //当时间减为0时把stti 清空   
  35.        clearTimeout(stti);             
  36.        //当时间减为0时自动提交表单,这个表单提交没测试,自己测试下   
  37.        document.form1.submit();     
  38.        alert("对不起已超时,答题以提交!!!");   
  39.        }   
  40.     }   
  41.   
  42. </script>