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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JavaScript 应用类库代码
Jun 02 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js实现文字截断功能
Sep 14 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
js基于canvas实现时钟组件
Feb 07 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
jQuery技巧总结
2011/01/01 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
一行python实现树形结构的方法
2019/08/09 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python dict的常用方法示例代码
2020/06/23 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
人事主管的岗位职责
2013/11/16 职场文书
商务主管岗位职责
2013/12/08 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
军神教学反思
2014/02/04 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书