发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

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

刘蕾

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
显示全部楼层

一、解构

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

在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。
  1. [/code]另外网页背景主体是蓝色。
  3. [size=5]（二）输入框和按钮[/size]
  5. [code]
复制代码
（三）倒计时显示

倒计时timer显示区域，用到了居中显示的CSS样式，同时设置了前景色为白色，字居中，字体大小180px：

（四）三个函数

go函数:
  1. //解析时间
  2. function go() {
  3.         clearInterval(timer);//清除定时器
  4.         document.getElementById("timer").style.color="#fff";//设置timer显示区域前景色为白色
  5.         time = document.getElementById("time").value;//获取起始时间
  6.         resetTime(time);//用time复位倒计时
  7. }
复制代码
reset函数:
  1. function resetTime(time) {
  2.     var t = parseInt(time) * 60; //将分钟换算成秒
  3.     var m, s; //分钟和秒
  4.     function countDown() { //递减函数
  5.         t--; //时间减1
  6.         if (t < 0) { //边界值检测，若t为零，就停止计时
  7.             t = 0;
  8.             stop();
  9.         }
  10.         m = Math.floor(t / 60); //取整分钟
  11.         s = t % 60; //取秒
  12.         s < 10 && (s = '0' + s); //秒值补齐0位
  13.         document.getElementById("timer").innerHTML = m + "分" + s + "秒"; //输出倒计时显示
  14.     } //end of countDown
  15.     timer = setInterval(countDown,1000); //设置计时器，每1000毫秒调用一次countDown递减函数
  16. }  //end of resetTime
复制代码
stop函数:
  1. function stop() {
  2.   clearInterval(timer); //停止计时
  3.   document.getElementById("timer").style.color="#f00"; //设置timer工区域前景色为RGB颜色红色
  4. }
复制代码
二、样例
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  5. </head>
  6. <body bgcolor="blue">
  7.         <input type="text" value="" id="time">
  8.         <input type="button" onclick="go()" value="开始">
  9.         <input type="button" onclick="stop()" value="停止">
  10.        
  11.        
  12.        
  13. </body>
  14. </html>
复制代码
来源:https://www.cnblogs.com/hele-two/p/18288131
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 使用 Performance API 实现前端资源监控

下一篇: JavaScript开发技巧必备【一】

发表于 2024-9-13 09:34:00

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4