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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
vue获取form表单的值示例
Oct 29 Javascript
antd form表单数据回显操作
Nov 02 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP动态变静态原理
2006/11/25 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
微信跳一跳python代码实现
2018/01/05 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python的range和linspace使用详解
2019/11/27 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
年度考核自我鉴定
2013/11/09 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
合作意向协议书范本
2014/03/31 职场文书
节能标语大全
2014/06/21 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript