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玩转继承(一)
May 08 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
thinkphp分页实现效果
2016/10/13 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP中16个高危函数整理
2019/09/19 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
解析js如何获取css样式
2016/12/11 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python使用python-docx读写word文档
2019/08/26 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
后勤部长岗位职责
2013/12/14 职场文书
一年级学生期末评语
2014/04/21 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
感恩节寄语2015
2015/03/24 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书