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中增加参数与Json转换代码
Nov 20 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
layui原生表单验证的实例
Sep 09 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 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中的数组操作函数整理
2008/08/18 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue实现微信分享功能
2018/11/28 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
直接有效的自我评价
2014/01/11 职场文书
财务主管自我鉴定
2014/01/17 职场文书
领班岗位职责范文
2014/02/06 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
PyTorch device与cuda.device用法
2022/04/03 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技