基于Javascript倒计时效果

2019-11-19 18:19:36

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

运行结果如图: