手把手教你制作最简网页版倒计时程序（核心代码仅25行）
一、解构
如图所示，手机浏览器的效果。代码就是简单的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>