瓜瓜头条

手把手教你制作最简网页版倒计时程序（核心代码仅25行）

2024-09-12 18:50 由 苦涩的心 发表于 #前端开发

一、解构

如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。

（一）显示样式

在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。

<style type="text/css">
    .center {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
</style>

另外网页背景主体是蓝色。
<body bgcolor="blue"/>

（二）输入框和按钮

<input type="text" value="" id="time">
<input type="button" onclick="go()" value="开始">
<input type="button" onclick="stop()" value="停止">

（三）倒计时显示

倒计时timer显示区域，用到了居中显示的CSS样式，同时设置了前景色为白色，字居中，字体大小180px：
<div id="timer" class=center style="color:#fff; text-align:center; font-size:180px;"/>

（四）三个函数

go函数:

//解析时间
function go() {
	clearInterval(timer);//清除定时器
	document.getElementById("timer").style.color="#fff";//设置timer显示区域前景色为白色
	time = document.getElementById("time").value;//获取起始时间
	resetTime(time);//用time复位倒计时
}

reset函数:

function resetTime(time) {
    var t = parseInt(time) * 60; //将分钟换算成秒
    var m, s; //分钟和秒
    function countDown() { //递减函数
        t--; //时间减1
        if (t < 0) { //边界值检测，若t为零，就停止计时
            t = 0;
            stop();
        }
        m = Math.floor(t / 60); //取整分钟
        s = t % 60; //取秒
        s < 10 && (s = '0' + s); //秒值补齐0位
        document.getElementById("timer").innerHTML = m + "分" + s + "秒"; //输出倒计时显示
    } //end of countDown
    timer = setInterval(countDown,1000); //设置计时器，每1000毫秒调用一次countDown递减函数
}  //end of resetTime

stop函数:

function stop() {
  clearInterval(timer); //停止计时
  document.getElementById("timer").style.color="#f00"; //设置timer工区域前景色为RGB颜色红色
}

二、样例

<!--(c)hele 2018倒计时程序，输入分钟数点击开始，内置递减程序，1秒递减1次-->
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
	.center {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
//	width:1000px;
	}
</style>
</head>
<body bgcolor="blue">
	<input type="text" value="" id="time">
	<input type="button" onclick="go()" value="开始">
	<input type="button" onclick="stop()" value="停止">
	<div id="timer" class=center style="color:#fff; text-align:center; font-size:180px;">
	</div>
	<script type="text/javascript">
		var timer = null;
		//解析时间
		function go() {
			clearInterval(timer);
			document.getElementById("timer").style.color="#fff";
			time = document.getElementById("time").value;
			resetTime(time);
		}
		function stop() {
			clearInterval(timer);
			document.getElementById("timer").style.color="#f00";
		}
		//设置倒计时器参数
		function resetTime(time) {
			var t = parseInt(time) * 60;
			var m, s;
			function countDown() {
				t--;
				if (t < 0) {
					t = 0;
					stop();
				}
				m = Math.floor(t / 60);
				s = t % 60;
				s < 10 && (s = '0' + s);
				document.getElementById("timer").innerHTML = m + "分" + s + "秒";
			} //end of countDown
			timer = setInterval(countDown,1000);
		}	 //end of resetTime
	</script>
</body>
</html>