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 相关文章推荐
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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中array_slice函数用法实例详解
2014/11/25 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python实现合并两个数组的方法
2015/05/16 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
python实现二分查找算法
2020/09/18 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
三年级语文教学反思
2014/02/01 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
租房协议书范例
2014/10/14 职场文书
党员评议自我评价
2015/03/03 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
正规欠条模板
2015/07/03 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
Python OpenGL基本配置方式
2022/05/20 Python