JS實現倒計時操作
阿新 • • 發佈：2018-12-31
3.編寫後臺程式碼(ExamController.java)<%@ page language="java" pageEncoding="UTF-8" import="java.util.concurrent.*" %> <html> <head> <title>考試頁面</title> <script type="text/javascript" src="${pageContext.request.contextPath }/staticfile/js/jquery-1.6.2.js"></script> <script type="text/javascript"> $(function(){ var timer = setInterval(function(){ var time = $("#time").html(); if (time=="00:00:00") { this.clearInterval(timer); alert("時間到，考試結束"); } $.post("/sysadmin/exam/AjaxCheck",{time:time}, function (data){ $("#time").html(TimeTool(parseInt(data))); }); }, 1000); }); function TimeTool(limitSec) { while(limitSec >= 0){ return secToTime(limitSec); } } function secToTime(time) { if (time <= 0) return "00:00:00"; var timeStr=null; var hour = parseInt(time / 3600); var minute = parseInt(time / 60) % 60; var second = time % 60; timeStr = unitFormat(hour) + ":" + unitFormat(minute) + ":" + unitFormat(second); return timeStr; } function unitFormat(i) { var retStr = null; if (i >= 0 && i < 10) retStr = "0" + i; else retStr = "" + i; return retStr; } </script> <style type="text/css"> #collection{ width: 140px; height: 26px; float: right; border: solid #8dff15 1px; margin-right: 70px; margin-top: 25px; text-align: center; vertical-align: middle; } </style> </head> <body> <form action="#" method="post"> <div id="collection"> 剩餘時間 <span id="time">${sessionScope.temp }</span> </div> <br/><br/> <hr style="color: #999999;"/> <ul style="text-decoration: none;"> <li><span>題號：１</span>題目ＸＸＸ</li> <li>選項１</li> <li>選項２</li> <li>選項３</li> <li>選項４</li> <li><span>題號：２</span>題目ＸＸＸ</li> <li>選項１</li> <li>選項２</li> <li>選項３</li> <li>選項４</li> <li><span>題號：３</span>題目ＸＸＸ</li> <li>選項１</li> <li>選項２</li> <li>選項３</li> <li>選項４</li> <li><span>題號：４</span>題目ＸＸＸ</li> <li>選項１</li> <li>選項２</li> <li>選項３</li> <li>選項４</li> <li><span>題號：５</span>題目ＸＸＸ</li> <li>選項１</li> <li>選項２</li> <li>選項３</li> <li>選項４</li> </ul> </form> </body> </html>