基于Javascript倒計(jì)時(shí)效果

2019-11-19 18:19:36

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了js倒計(jì)時(shí)效果的具體代碼，供大家參考，具體內(nèi)容如下

Index.html

<!DOCTYPE html ><html><head><title>倒計(jì)時(shí)</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(),//月份是實(shí)際月份-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);//計(jì)算天   $(hour_elem).text(hour<10?"0"+hour:hour);//計(jì)算小時(shí)   $(minute_elem).text(minute<10?"0"+minute:minute);//計(jì)算分鐘   $(second_elem).text(second<10?"0"+second:second);//計(jì)算秒殺  } 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;">時(shí)</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>

運(yùn)行結(jié)果如圖: