jQuery网页倒计时代码显示天、小时、分钟与秒数__sys_second_var_countDown_floor_day_elem_

当前位置: 编程技术>jquery

jQuery网页倒计时代码显示天、小时、分钟与秒数

来源: 互联网发布时间：2014-10-04

本文导语: 一个js倒计时代码，可倒计算天、小时、分钟和秒数。使用了jquery插件，倒计时日期在countDown中修改，暂定为2014/10/1 10:00:00，当然这个日期只是让大家测试用的。可指定比如国庆、世界杯、网购狂欢日等一类的倒计时时间。 ...

一个js倒计时代码，可倒计算天、小时、分钟和秒数。
使用了jquery插件，倒计时日期在countDown中修改，暂定为2014/10/1 10:00:00，当然这个日期只是让大家测试用的。
可指定比如国庆、世界杯、网购狂欢日等一类的倒计时时间。

完整代码：

代码示例:

Jquery实现的精美倒计时_www.

*{ padding:0; margin:0;}

.colockbox{width:250px;height:30px;background:url(/jscss/demoimg/201312/colockbg.png) no-repeat;overflow: hidden; color:#000000;}

.colockbox span{float:left;display:block;width:40px;height:29px;line-height:29px;font-size:20px; font-weight:bold;text-align:center;color:#ffffff; margin-right:22px;}

$(function(){

 countDown("2014/10/1 10:00:00","#colockbox1");

});

function countDown(time,id){

 var day_elem = $(id).find('.day');

 var hour_elem = $(id).find('.hour');

 var minute_elem = $(id).find('.minute');

 var second_elem = $(id).find('.second');

 var end_time = new Date(time).getTime(),//月份是实际月份-1

 sys_second = (end_time-new Date().getTime())/1000;

 var timer = setInterval(function(){

  if (sys_second > 1) {

   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