简易JS倒计时-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18468/article/details/81828328

写了个超简单的 js 倒计时，使用了 jquery1.4.2 库，
程序就是1个 html ，可以直接执行，（需要联网，因为引用了在线 jquery 库）

倒计时程序：


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>倒计时 - js</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
			// Interval 的 id，用于取消定时
			var interId;
			/**
			 * 根据毫秒数显示时间
			 * @param t 毫秒数
			 */
			function showTime(t) {
				// 总秒数
				var xt = parseInt(t/1000);
				// 秒数
				var remain_sec = xt % 60;
				xt = parseInt(xt/60);
				// 分数
				var remain_minute = xt % 60;
				xt = parseInt(xt/60);
				// 小时数
				var remain_hour = xt % 24;
				xt = parseInt(xt/24);
				// 天数
				var remain_day = xt;

				// 设置倒计时各字段的值
				$('#secondSpanId').html(remain_sec);
				$('#minuteSpanId').html(remain_minute);
				$('#hourSpanId').html(remain_hour);
				$('#daySpanId').html(remain_day);
			}

			/**
			 * 取消 倒计时
			 */
			function cancelCountdown() {
				clearInterval(interId);
			}			
			/**
			 * 倒计时
			 */
			function countdown() {
				// 获得剩余时间
				var t = $('#remainTime').val();
				if(t <= 0) { // 已经到时间了，则停止倒计时
					cancelCountdown();
					return;
				}
				// 减 1 秒
				t = t - 1000;
				if(t <= 0) {
					t = 0;
				}
				// 设置隐藏域的值
				$('#remainTime').val(t);
				// 显示倒计时时间
				showTime(t);
			}
			// 倒计时入口函数
			function gate(){
				if ($('#remainTime') != null) { // 尚未结束
					// 获得毫秒数
					var millSec = $('#remainTime').val();
					if(Number(millSec) && millSec >= 0) { // 输入合法
						// 初始显示
						showTime(millSec);
						// 倒计时开始
						interId = setInterval("countdown()",1000);
						// 禁用 开始 按钮
						$('#startButton').attr('disabled',true);
					} else {
						alert('毫秒数不合法');
					}
				}
			}
		</script>
	</head>
	<body>
		输入毫秒数：<input type="text" name="remainTime" id="remainTime" />
		<input type="button" id="startButton" value="开始倒计时" onclick="gate();" />
		<input type="button" id="endButton" value="清除倒计时" onclick="cancelCountdown();$('#startButton').attr('disabled',false);" />
		<br />
		<div id="countdownDiv">
			<span><span id="daySpanId"></span>天</span>
			<span><span id="hourSpanId"></span>时</span>
			<span><span id="minuteSpanId"></span>分</span>
			<span><span id="secondSpanId"></span>秒</span>
		</div>
	</body>
</html>