JS实现考试管理系统中的倒计时（精确到时、分、秒）

最新推荐文章于 2024-04-28 17:03:19 发布

sxpsinosoft

最新推荐文章于 2024-04-28 17:03:19 发布

阅读量836

点赞数

文章标签： JSP CSS Cache 算法 JavaScript ViewUI

本文介绍了一个使用JavaScript实现的简单倒计时程序。该程序利用了window对象中的setTimeout()和clearTimeout()方法来控制时间更新，并通过计算小时、分钟和秒数来显示剩余时间。当时间结束时，会弹出提示框询问用户是否提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JS实现这个小程序，其实还是比较简单的，主要用到了window对象中的setTimeout()方法和clearTimeout()方法，其它的便是关于时、分、秒算法的问题，方法有很多，在这里我只采用其中一种比较简单的方法。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'demo4.jsp' starting page</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">

var vartime, h, m, s, hstr, mstr, sstr;

var xtime = 1.5 * 60 * 60;

function timeclock() {

	if (xtime >= 0) {

		h = parseInt(xtime / 3600);

		m = parseInt((xtime % 3600) / 60);

		s = (xtime % 3600) % 60;

		hstr = h < 10 ? ("0" + h) : h;

		mstr = m < 10 ? ("0" + m) : m;

		sstr = s < 10 ? ("0" + s) : s

		vartime = hstr + ":" + mstr + ":" + sstr;

		document.getElementById("timer").value = vartime;

		xtime--;

		setTimeout("timeclock();", 1000);

	} else {

		clearTimeout("timeclock();")

		var flag = confirm("时间到，单击“确定”以提交");

		if (flag) {

			document.forms[0].submit();

		} else {

			window.close("./demo.jsp");

		}

	}

}
</script>
	</head>
	<body>
		<center>
			<form action="./index.jsp" method="post">
				剩余时间：
				<input type="text" id="timer" name="txt" size="4"
					readonly="readonly" />
				&nbsp;&nbsp;
				<input type="button" value="开始" onclick="timeclock();" />
			</form>
		</center>
	</body>
</html>