手把手教你制作最简网页版倒计时程序（核心代码仅25行）
|
|
一、解构
如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。
（一）显示样式
在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。- [/code]另外网页背景主体是蓝色。
- [size=5]（二）输入框和按钮[/size]
- [code]
倒计时timer显示区域，用到了居中显示的CSS样式，同时设置了前景色为白色，字居中，字体大小180px：
（四）三个函数
go函数:- //解析时间
- function go() {
- clearInterval(timer);//清除定时器
- document.getElementById("timer").style.color="#fff";//设置timer显示区域前景色为白色
- time = document.getElementById("time").value;//获取起始时间
- resetTime(time);//用time复位倒计时
- }
- 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
- 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>
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！ |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
x
|
|
|
|
|
|
|
|
|
|
