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中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
用vue写一个日历
Nov 02 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
基于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银联网页支付实现方法
2015/03/04 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue观察模式浅析
2018/09/25 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
PyMongo安装使用笔记
2015/04/27 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
Python如何定义一个函数
2015/09/01 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
自主招生自荐书
2013/11/29 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
小学美术教学反思
2014/02/01 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
学生保证书
2015/01/16 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android