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 AJAX提交中文乱码的解决方案
Jul 02 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript引导程序
2008/10/26 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
Angular实现响应式表单
2017/08/04 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python with语句和过程抽取思想
2019/12/23 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
文明班集体申报材料
2014/05/23 职场文书
课例研修方案
2014/05/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python