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 联动日历实现代码
May 31 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Javascript的比较汇总
Jul 25 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
基于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
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python如何操作mysql
2020/08/17 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
九年级数学教学反思
2014/02/02 职场文书
体育教师求职信
2014/06/30 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书