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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 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 UNIX时间戳用法详解
2017/02/16 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
python 实现插入排序算法
2012/06/05 Python
python中Flask框架简单入门实例
2015/03/21 Python
python执行精确的小数计算方法
2019/01/21 Python
python制作简单五子棋游戏
2019/06/18 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python批量生成条形码的示例
2020/10/10 Python
python实现计算图形面积
2021/02/22 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
会计专业应届生自荐信
2014/02/07 职场文书
保护环境的建议书
2014/03/12 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题