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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
Javascript的比较汇总
Jul 25 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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/02/17 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python模块内置属性概念及实例
2021/02/18 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python