javascript实现倒计时(精确到秒)


Posted in Javascript onJune 26, 2015

代码相当简单实用,这里就不多废话了,小伙伴们简单看下就能明白

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="demo01" class="colockbox">剩余
<i class="day">0</i>天
<i class="hour">0</i>时
<i class="minute">0</i>分
<i class="second">0</i>秒
<input id="end_time_gou" type="hidden" value="2015/08/20 13:00:00">
<input id="now_gou" type="hidden" value="2015/06/25 11:44:08">
</div>

<div id="timer" class="colockbox">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
var time_end = $('#end_time_gou').val();
var time_now_server = $('#now_gou').val();
countDown(time_end,time_now_server,"#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
function countDown(endtime,now,day_elem,hour_elem,minute_elem,second_elem){
var end_time = new Date(endtime).getTime(),//月份是实际月份-1
current_time = new Date(now).getTime(),
sys_second = (end_time-current_time)/1000;
var timer = setInterval(function(){
if (sys_second > 0) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
day_elem && $(day_elem).text(day);//计算天
$(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
$(minute_elem).text(minute<10?"0"+minute:minute);//计算分
$(second_elem).text(second<10?"0"+second:second);// 计算秒
} else {
clearInterval(timer);
}
}, 1000);
}
</script>
<script type="text/javascript">
var time_now_server,time_now_client,time_end,time_server_client,timerID;
time_end=new Date($('#end_time_gou').val());//结束的时间
time_end=time_end.getTime();
time_now_server=new Date($('#now_gou').val());//开始的时间,服务器
time_now_server= time_now_server.getTime();
time_now_client=new Date();
time_now_client=time_now_client.getTime();//本地的时间
time_server_client=time_now_server-time_now_client;
setTimeout("show_time("+time_end+","+time_server_client+","+timerID+")",1000);
function show_time(time_end,time_server_client,timerID){
var timer = document.getElementById('timer');
if(!timer){return;}
timer.innerHTML = timer.innerHTML;
var time_now,time_distance,str_time;
var int_day,int_hour,int_minute,int_second;
var time_now=new Date();
time_now=time_now.getTime()+time_server_client;
time_distance=time_end-time_now;
if(time_distance>0){
int_day=Math.floor(time_distance/86400000)
time_distance-=int_day*86400000;
int_hour=Math.floor(time_distance/3600000)
time_distance-=int_hour*3600000;
int_minute=Math.floor(time_distance/60000)
time_distance-=int_minute*60000;
int_second=Math.floor(time_distance/1000)
if(int_hour<10)
int_hour="0"+int_hour;
if(int_minute<10)
int_minute="0"+int_minute;
if(int_second<10)
int_second="0"+int_second;
str_time=int_day+"天"+int_hour+"小时"+int_minute+"分钟"+int_second+"秒";
timer.innerHTML=str_time;
setTimeout("show_time("+time_end+","+time_server_client+","+timerID+")",1000);
}else{
timer.innerHTML =timer.innerHTML;
clearTimeout(timerID)
}
}

</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 #Javascript
jquery实现的树形目录实例
Jun 26 #Javascript
arguments对象验证函数的参数是否合法
Jun 26 #Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 #Javascript
jquery实现不包含当前项的选择器实例
Jun 25 #Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 #Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 #Javascript
You might like
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python3实现简单飞机大战
2020/11/29 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
关于抽烟的检讨书
2014/02/25 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
汽车维修求职信
2014/06/15 职场文书
同志主要表现材料
2014/08/21 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python