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

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>