js 多个倒计时,毫秒倒计时
其实主要是借鉴了了这篇文的写法(http://tuzwu.iteye.com/blog/819081),俺稍作了修改,以便更适合我的需要:
实现功能:调用一个函数,传入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%24);改成var hour =Math.floor(distancetime/1000/60/60);
如果截止时间距今超出一天了,小时位置会显示大于24的数字;比如:36:45:22:888
方法2:你自己再写一个计算天数的变量;
(其实我觉得毫秒倒计时完全没有必要,精确到秒就够了嘛~毫秒这么快,简直看得我眼瞎!)
js 多个倒计时,毫秒倒计时的更多相关文章
- JS倒计时-毫秒
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- js 倒计时毫秒级别显示
<html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...
- js 和 java 将时间倒计时显示
需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...
- js写的5秒钟倒计时跳转
使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过 代码如下: <html> <head> < ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- 毫秒倒计时小Demo
Demo截图: Demo:Demo 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
- [JS] 自己弄得个倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js学习笔记之日期倒计时(天,时,分,秒)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- netty10---分包粘包
客户端:根据 长度+数据 方式发送 package com.server; import java.net.Socket; import java.nio.ByteBuffer; public cla ...
- JqGrid 隐藏水平滚动条完美解决方案
我有强迫症,网上找的几个看着就不舒服 不用更改样式表,隐藏最右侧的边框. .ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; } 不用通过js控制加1px ...
- Mac OS下开启自带的apache服务
Apache路径 /etc/apache2/ [root@GGs-MacBook-Pro:/Volumes/SSD/blog#cd /etc/apache2/ [root@GGs-MacBook-Pr ...
- linux内核动态打印
参考:https://www.cnblogs.com/pengdonglin137/p/4622460.html https://linux.cn/article-3682-1.html?pr 如何打 ...
- Swoole学习(七)Swoole之异步TCP服务器的创建
环境:Centos6.4,PHP环境:PHP7 <?php //创建TCP服务器 /** * $host 是swoole需要监听的ip,如果要监听本地,不对外服务,那么就是127.0.0.1;如 ...
- 强大的jQuery选择器 平时用的太少了 下次要先来看看
- MongoDB-与Python交互
与python交互 点击查看官方文档 安装python包 进入虚拟环境 sudo pip install pymongo 或源码安装 python setup.py 引入包pymongo import ...
- Ansible Playbooks 常用模块
官网链接:https://docs.ansible.com/ansible/latest/modules/list_of_all_modules.html ansible python module ...
- 04_MySQL常见函数_单行函数
#单行函数细分1.字符函数2.数学函数3.日期函数4.其他函数5.流程控制函数 #单行函数 - 字符函数#一.字符函数#1. length 获取参数的字节长度SELECT LENGTH('john') ...
- 07_ZkClient提供的API使用
1. ZkClient API简介 zkclient是Github上一个开源的ZooKeeper客户端,在原生ZooKeeper API接口上进行包装,同时在内部实现了session超时重连,Watc ...