本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下

Index.html


<!DOCTYPE html >

<html>

<head>

<title>倒计时</title>



<style type="text/css">

  .colockbox

  {

   width:500px;

   height:20px; 

   color:#000000;

  }



  .colockbox span

  {

  float:left;display:block;

  width:20px;

  height:20px;

  line-height:20px;

  font-size:18px; 

  font-weight:bold;

  text-align:center;

  color:#ffffff; 

  text-indent:3px; 

  }



  .square 

  {

   float:left;

   width:26px;

   height:20px;

   background-color:#222222;

   border-radius:3px;

   padding:0px;

   margin-right:5px;

  }



</style>



<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script type="text/javascript">

$(function(){

 countDown("2016/12/25 23: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<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>

</head>

<body>



<div class="colockbox" id="colockbox1">





<div class="square"> 

<span class="day">00</span> 

</div>

<span style="color:gray;font-size:15px; float:left;">天</span>



<div class="square"> 

<span class="hour">00</span> 

</div>

<span style="color:gray;font-size:15px; float:left;">时</span>



<div class="square"> 

<span class="minute">00</span> 

</div>

<span style="color:gray;font-size:15px; float:left;">分</span>



<div class="square"> 

<span class="second">00</span> 

</div>

<span style="color:gray;font-size:15px; float:left;">秒</span>

</div>

</body>

</html>



运行结果如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持新人网。

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册