【工作笔记】关于考试系统倒计时注意事项

1.当前获取时间和页面加载获取的时间应都从服务器上获取。

 服务器端时间获取如下：

 Date endTime=new Date();
  SimpleDateFormat
sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");

 //转为此格式方便后面生成Date对象，调用其方法getTime（）。

  String
time= sdf.format(endTime);

 request.getSession().setAttribute("endTime",time);//将界面加载时获取的时间用session保存。

 //endTime+paperTime（考试时间）即为最终考试结束时间。

2.在jsp页面上获取服务器传的endTime

 <input id="endTime" type="hidden" value="${endTime }" ></input>

3.JavaScript中获取服务器时间，倒计时制作

<script>

  var
endTime = document.getElementById("endTime").value;  

 //endTime
此时为页面加载进来时的服务器时间，要在后面加上考试时间即为考试结束时间

 
var newDate = new Date(endTime);//生成Date对象 newDate，参数是endTime（已在后台fomat转了格式，直接用）
  var
paperTime;
  paperTime=
document.getElementById("paperTime").value;// 考试时间，单位分钟

 
  paperTime=paperTime*60;//转为单位秒

 
  var toHour=Math.floor(paperTime/3600); //90分钟则toHour=1
  var
toMinute=Math.floor((paperTime-3600*toHour)/60);//toMinute=30
  var
toSecond=Math.floor(paperTime-3600*toHour-60*toMinute) //toSecond=0

 
//90分钟即转为了1小时30分0秒

  //加上考试时间
  
newDate.setHours(newDate.getHours()+toHour); 
  newDate.setMinutes(newDate.getMinutes()+toMinute);
  newDate.setSeconds(newDate.getSeconds()+toSecond);
 

  //【划重点】在页面上获取此时服务器时间，不是加载时的服务器时间！
  var
nowTime = new Date(<%=new java.util.Date().getTime()%>);

 function run() {       
   
 nowTime.setSeconds(nowTime.getSeconds() + 1);
 }   

 setInterval("run();", 1000);

//每一秒运行一次function
run，一次加一秒。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

  function
timer()  
   {    

   
   var totalSecond = Math.floor((newDate.getTime()-nowTime.getTime())/1000);
//计算剩余秒数   
//date.getTime()方法返回long类型的毫秒数

   
   if(totalSecond==0){  //当剩余秒数为0时提交表单

       
   $("#formdata").submit();

     }

   
 var remainHour=Math.floor(totalSecond/3600); //剩余小时

     var remainMinute=Math.floor((totalSecond-3600*remainHour)/60);//剩余分钟    

   
 var remainSecond=Math.floor(totalSecond-3600*remainHour-60*remainMinute);//剩余秒数

   
 $("#remainHour").text(remainHour+"小时");

   
 $("#remainMinute").text(remainMinute+"分钟");

   
 $("#remainSecond").text(remainSecond+"秒");
 }  
 setInterval(timer,1000);    </script> 

4.页面显示

 <label>剩余时间：

       
 <span id="remainHour"></span>

       
 <span id="remainMinute"></span>

       
 <span id="remainSecond"></span>

    </label>