原生JS实现简单的倒计时功能示例
程序员文章站
2024-02-07 15:18:52
本文实例讲述了原生js实现简单的倒计时功能。分享给大家供大家参考,具体如下:
1、第一种
...
本文实例讲述了原生js实现简单的倒计时功能。分享给大家供大家参考,具体如下:
1、第一种
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js倒计时</title> </head> <body> <div id="div"></div> <script type="text/javascript"> window.onload=clock; function clock(){ var today=new date(),//当前时间 h=today.gethours(), m=today.getminutes(), s=today.getseconds(); var stoptime=new date("feb 9 2019 00:00:00"),//结束时间 stoph=stoptime.gethours(), stopm=stoptime.getminutes(), stops=stoptime.getseconds(); var shenyu=stoptime.gettime()-today.gettime(),//倒计时毫秒数 shengyud=parseint(shenyu/(60*60*24*1000)),//转换为天 d=parseint(shenyu)-parseint(shengyud*60*60*24*1000),//除去天的毫秒数 shengyuh=parseint(d/(60*60*1000)),//除去天的毫秒数转换成小时 h=d-shengyuh*60*60*1000,//除去天、小时的毫秒数 shengyum=parseint(h/(60*1000)),//除去天的毫秒数转换成分钟 m=h-shengyum*60*1000;//除去天、小时、分的毫秒数 s=parseint((shenyu-shengyud*60*60*24*1000-shengyuh*60*60*1000-shengyum*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒 document.getelementbyid("div").innerhtml=(shengyud+"天"+shengyuh+"小时"+shengyum+"分"+s+"秒"+"<br>"); // settimeout("clock()",500); settimeout(clock,500); } </script> </body> </html>
运行效果:
2、第二种
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>www.jb51.net js倒计时</title> <style> *{ margin: 0; padding:0; } p { font-size: 80px; text-align: center; } p span { color: red; } p span.time { color: black } body{padding-top:200px;} </style> </head> <body> <p>距离2019年还有</p> <p><span></span></p> <script> var ospan = document.getelementsbytagname('span')[0]; function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; } function getdate() { var odate = new date();//获取日期对象 var oldtime = odate.gettime();//现在距离1970年的毫秒数 var newdate = new date('2019/1/1 00:00:00'); var newtime = newdate.gettime();//2019年距离1970年的毫秒数 var second = math.floor((newtime - oldtime) / 1000);//未来时间距离现在的秒数 var day = math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ; second = second % 86400;//余数代表剩下的秒数; var hour = math.floor(second / 3600);//整数部分代表小时; second %= 3600; //余数代表 剩下的秒数; var minute = math.floor(second / 60); second %= 60; var str = tow(day) + '<span class="time">天</span>' + tow(hour) + '<span class="time">小时</span>' + tow(minute) + '<span class="time">分钟</span>' + tow(second) + '<span class="time">秒</span>'; ospan.innerhtml = str; } getdate(); setinterval(getdate, 1000); </script> </body> </html>
运行效果:
感兴趣的朋友可以使用在线html/css/javascript代码运行工具:http://tools.jb51.net/code/htmljsrun测试上述代码,即可得到上述运行结果。
ps:这里再为大家推荐几款时间及日期相关工具供大家参考使用:
在线秒表工具:
在线日期/天数计算器:
在线日期计算器/相差天数计算器:
unix时间戳(timestamp)转换工具:
更多关于javascript相关内容还可查看本站专题:《javascript时间与日期操作技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。