手把手教你制作最简网页版倒计时程序（核心代码仅25行）
一、解构
如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。
（一）显示样式
在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。
另外网页背景主体是蓝色。
（二）输入框和按钮
（三）倒计时显示
倒计时timer显示区域，用到了居中显示的CSS样式，同时设置了前景色为白色，字居中，字体大小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 resetTimestop函数:
function stop() {
clearInterval(timer); //停止计时
document.getElementById("timer").style.color="#f00"; //设置timer工区域前景色为RGB颜色红色
}二、样例
<!DOCTYPE HTML>
<html>
<head>
</head>
<body bgcolor="blue">
<input type="text" value="" id="time">
<input type="button" onclick="go()" value="开始">
<input type="button" onclick="stop()" value="停止">
</body>
</html>
来源:https://www.cnblogs.com/hele-two/p/18288131
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]