Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要以实例的方式讲解多个 js 毫秒倒计时同时进行效果,感兴趣的小伙伴们可以参考一下
效果图:
实现功能:调用一个函数,传入 html 元素的 id,和一个截止时间(unix 时间戳),在该 html 元素中打印出到当前到截止时间为止的倒计时, 精确到毫秒;
效果图如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>
- </title>
- <style>
- div{ width: 100%; height: 50px; margin-bottom: 5px; background: yellowgreen;
- }
- </style>
- </head>
- <body>
- <h2>
- 毫秒的倒计时
- </h2>
- <div id="timer1">
- </div>
- <div id="timer2">
- </div>
- <div id="timer3">
- </div>
- <div id="timer4">
- </div>
- <script>
- var addTimer = function() {
- var list = [],
- interval;
- return function(id, timeStamp) {
- if (!interval) {
- interval = setInterval(go, 1);
- }
- list.push({
- ele: document.getElementById(id),
- time: timeStamp
- });
- }
- function go() {
- for (var i = 0; i < list.length; i++) {
- list[i].ele.innerHTML = changeTimeStamp(list[i].time);
- if (!list[i].time) list.splice(i--, 1);
- }
- }
- //传入unix时间戳,得到倒计时
- function changeTimeStamp(timeStamp) {
- var distancetime = new Date(timeStamp * 1000).getTime() - new Date().getTime();
- if (distancetime > 0) { //如果大于0.说明尚未到达截止时间
- var ms = Math.floor(distancetime % 1000);
- var sec = Math.floor(distancetime / 1000 % 60);
- var min = Math.floor(distancetime / 1000 / 60 % 60);
- var hour = Math.floor(distancetime / 1000 / 60 / 60 % 24);
- if (ms < 100) {
- ms = "0" + ms;
- }
- if (sec < 10) {
- sec = "0" + sec;
- }
- if (min < 10) {
- min = "0" + min;
- }
- if (hour < 10) {
- hour = "0" + hour;
- }
- return hour + ":" + min + ":" + sec + ":" + ms;
- } else { //若否,就是已经到截止时间了
- return "已截止!"
- }
- }
- } ();
- addTimer("timer1", 1451923200); //1月5日00点,unix时间戳自己去百度一下,就有的
- addTimer("timer2", 1451926800); //1月5日01点
- addTimer("timer3", 1451930400); //1月5日02点
- addTimer("timer4", 1452020400); //1月6日03点
- </script>
- </body>
- </html>
如何使用这个函数?
addTimer("#id", 时间戳 int);
PS:
其实这个函数有一个小小的问题:就是并不会显示截止天数;因为老板表示我们的倒计时时间最多也就几个小时, 所以在判断倒计时的小时和天数上,我也就懒得写那么多了。所以如果传入的时间戳距今超过了 1 天。那么你会看到如此结果:02:11:32:874~~ 只剩 2 个小时了!明显不对是不是?
so,有 2 个方案这里:
方法 1:把 var hour =Math.floor(distancetime/1000/60/60$); 改成 var hour =Math.floor(distancetime/1000/60/60);
如果截止时间距今超出一天了,小时位置会显示大于 24 的数字;比如:36:45:22:888
方法 2:你自己再写一个计算天数的变量;
来源: http://www.phperz.com/article/17/0623/267749.html