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 removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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-MySQL教程归纳总结
2008/06/07 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Django实现学生管理系统
2019/02/26 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python获取Linux发行版名称
2019/08/30 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
创建文明城市标语
2014/06/16 职场文书
保安2014年终工作总结
2014/12/06 职场文书
北京青年观后感
2015/06/15 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书