<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content = "text/html,charset=utf-8">
<title>time test</title>
<style type="text/css">
.time{font-size:50px;color:red;}
</style>
<script type="text/javascript">
var ms = 9;//虚拟数字，放在时间后面
var interval = null;
var json = [{"time":"2015/11/17 18:10:00","id":"time1"},
{"time":"2015/11/17 18:08:00","id":"time2"},
{"time":"2015/11/17 18:07:00","id":"time3"}
];
function tm_backTime(timeDate,objId){
var endTime = new Date(timeDate);
var date = new Date();
var leftTime = (endTime.getTime() - date.getTime())/1000;//总的秒数
var d = Math.floor(leftTime/3600/24);
var h = Math.floor((leftTime/3600)%24);
var m = Math.floor(leftTime/60)%60;
var s = Math.floor(leftTime%60);
document.getElementById(objId).innerHTML = d+"天"+h+"小时"+m+"分钟"+s+"秒"+ms;
if(leftTime <= 0){
document.getElementById(objId).innerHTML = "Time's Over!";
}
}
//虚拟数字，每0.1秒变化一次
interval = setInterval(function(){
if(ms == 0){
ms = 9;
}
ms = ms - 1;
},100);
//窗口加载
window.onload = function(){
interval = setInterval(function(){
for(var i=0;i<json.length;i++){
tm_backTime(json[i].time,json[i].id);
}
});
}
</script>
</head>
<body>
<p class="time" id="time1"></p>
<p class="time" id="time2"></p>
<p class="time" id="time3"></p>
</body>
</html>
相关推荐
CountDownTimer实现抢购倒计时
Android实现计时与倒计时(限时抢购)的几种方法
Android倒计时 Android仿京东倒计时 Android商城倒计时 博客地址 http://blog.csdn.net/yu_blog/article/details/70257211
篮球倒计时 工程说明 本项目包含2个按键和4位数码管显示，要求共同实现一个篮球24秒的倒计时，并具有暂停和重新计数复位的功能。 案例补充说明 与单片机等实现模式相比，FPGA倒计时系统大大简化，整体性能和可靠性...
这个是用矩阵操作字符来模拟字符模拟倒计时操作的，感兴趣的下来看看，如有更好的方法，希望大家给我提供，QQ：865970132
倒计时计时器.fla 这是一个flash的倒计时计时器 简单 一个倒计时的表
篮球三十秒 计时电路倒计时器设计报告.pdf篮球三十秒 计时电路倒计时器设计报告.pdf篮球三十秒 计时电路倒计时器设计报告.pdf篮球三十秒 计时电路倒计时器设计报告.pdf篮球三十秒 计时电路倒计时器设计报告.pdf篮球...
倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验倒计时实验
在STM32上连接显示屏，屏幕上显示60s倒计时
轻松帮住你显示 倒计时抢购功能，如果有web前端开发的需要，这最好不过了。
Android 商城商品倒计时，用于限时抢购 商城商品倒计时，用于限时抢购商城商品倒计时，用于限时抢购
高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考倒计时工具高考...
jquery实现倒计时，支持多行分别无限循环倒计时，参考价值不错
数电课程设计-30秒倒计时器 (2).pdf数电课程设计-30秒倒计时器 (2).pdf数电课程设计-30秒倒计时器 (2).pdf数电课程设计-30秒倒计时器 (2).pdf数电课程设计-30秒倒计时器 (2).pdf数电课程设计-30秒倒计时器 (2).pdf...
列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码...
单片机简易秒表正计时时间可设置倒计时时间可查询.pdf单片机简易秒表正计时时间可设置倒计时时间可查询.pdf单片机简易秒表正计时时间可设置倒计时时间可查询.pdf单片机简易秒表正计时时间可设置倒计时时间可查询.pdf...
Android 抢购倒计时的使用解析 ..
倒计时软件倒计时软件 倒计时软件倒计时软件 倒计时软件倒计时软件 倒计时软件倒计时软件 倒计时软件倒计时软件 倒计时软件倒计时软件 倒计时软件倒计时软件
考研倒计时小工具计时 考研倒计时小工具计时
元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦倒计时代码 元旦...