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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript模拟push
Mar 06 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
微信小程序实现拖拽功能
Sep 26 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类的封装与继承详解
2015/09/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
子页向父页传值示例
2013/11/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
wxPython学习之主框架实例
2014/09/28 Python
详细探究Python中的字典容器
2015/04/14 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python模块 _winreg操作注册表
2020/02/05 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
机电专业毕业生求职信
2013/10/27 职场文书
白酒市场开发计划书
2014/01/09 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
2014年学前班工作总结
2014/12/08 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
python解析照片拍摄时间进行图片整理
2022/07/23 Python