javascript倒计时代码及倒计时弹窗

在前端开发中，难免会用到倒计时。如做的双十一活动，在距活动开始的半个月前需要做些宣传工作，需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时，如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期，特别是在距活动结束仅有1天左右时，就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部（当然也可以设置在其它地方，如首页中部等），并设置弹窗弹出10秒后自动消失，由用户决定是否点击到相应的活动页面，购买产品。

需要的技术支持：CSS3，jQuery库；

HTML代码如下：

< section class = "the_body" >
    < div class = "countdown" >
        < h3 >距中国雄于地球之日还有</ h3 >
        < div class = "countdown_time" >
          < span class = "the_days" >< i >0</ i >< i >3</ i ></ span >
          < i class = "date_text" >天</ i >
          < span class = "the_hours" >< i >0</ i >< i >7</ i ></ span >
          < i class = "date_text" >时</ i >
          < span class = "the_minutes" >< i >4</ i >< i >7</ i ></ span >
          < i class = "date_text" >分</ i >
          < span class = "the_seconds" >< i >1</ i >< i >1</ i ></ span >
          < i class = "date_text" >秒</ i >
        </ div >
    </ div >
</ section >

css代码如下：

.the_body{ width : 100% ; max-width : 640px ; min-width : 320px ; margin : 0 auto ;}
.countdown{ background : #ffec20 ; padding : 10px 0 ;}
.countdown h 3 { margin : 0 ; padding : 5px 0 ; color : #f53544 ; text-align : center ; font-size : 14px ;}
.countdown .countdown_time{ display : block ; width : 100% ; text-align : center ;}
.countdown .countdown_time i{ display :inline- block ; position : relative ; padding : 0 3px ; font-style : normal ; background : #fff ;
margin : 0 2px ;border-radius: 3px ;box-shadow: 0px 1px 1px #ccc ; border-bottom : 1px solid #cfcfcf ;font-weight
: bold ;}
.countdown .countdown_time i:after{ content : "" ; width : 100% ; border : 1px solid #cfcfcf ; border-width : 1px 0 0 ; position : absolute ;
bottom : 1px ; left : 0 ;}
.countdown .countdown_time i:before{ content : "" ; width : 100% ; border : 1px solid #cfcfcf ; border-width : 1px 0 0 ; position : absolute ;
bottom : 3px ; left : 0 ;}
.countdown .countdown_time .date_text{ background : transparent ; font-weight : bold ;box-shadow: none ;
border-bottom : none ; text-decoration : none ; padding : 0 ;}
.countdown .countdown_time .date_text:after{ content : "" ; border : none ;}
.countdown .countdown_time .date_text:before{ content : "" ; border : none ;}

JavaScript代码如下：

<script>
function remaintime() {
  var date = new Date( "Jan 1,2015 00:00:00" ); //设置倒计时结束时间
  var nowdate = new Date(); //获取当前日期
  var remaintime = date.getTime() - nowdate.getTime(); //获取现在到倒计时结束时间的毫秒数
  var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24)); //计算求得剩余天数
  var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60)); //计算求得剩余小时数
  var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60)); //计算求得剩余分钟数
  var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
        1000 * 60) / (1000)); //计算求得剩余秒数
  //当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
  if (remainday < 10) {
    remainday = "0" + remainday;
  } else {remainday+= "" ;
  //当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
  if (remainhour < 10) {
    remainhour = "0" + remainhour;
  } else {remainhour+= "" ;}
  if (remainminute < 10) {
    remainminute = "0" + remainminute;
  } else {remainminute+= "" ;}
  if (remainsecond < 10) {
    remainsecond = "0" + remainsecond;
  } else {remainsecond+= "" ;}
  $( ".the_days i:first-child" ).html(remainday.substr(0, 1));
  $( ".the_days i:last-child" ).html(remainday.substr(1, 2));
  $( ".the_hours i:first-child" ).html(remainhour.substr(0, 1));
  $( ".the_hours i:last-child" ).html(remainhour.substr(1, 2));
  $( ".the_minutes i:first-child" ).html(remainminute.substr(0, 1));
  $( ".the_minutes i:last-child" ).html(remainminute.substr(1, 2));
  $( ".the_seconds i:first-child" ).html(remainsecond.substr(0, 1));
  $( ".the_seconds i:last-child" ).html(remainsecond.substr(1, 2));
  setTimeout( "remaintime()" ,1000); //设置1秒后调用remaintime函数
}
remaintime();
setTimeout( function (){$( ".countdown" ).hide();},10000); //在首页设置的弹窗效果，在分页这段代码可以不设置
</script>

这是我自己写的倒计时效果，当然每个人都可以根据自己的爱好，设置倒计时的效果。如你可以只显示“几天几时几分”，但个人觉得没有设置到“几天几时几分几秒”够气氛。这里的样式也都可以根据自己的喜好改动，但最终的效果都是制造活动开始前的火热氛围。

至于这里的html代码、css代码及JavaScript代码需要注意的也说下：

1.html代码就不多说，主要就是怎么设置dom，以易于JavaScript操作；

2.css代码，这里主要用了:before与:after伪类，设置倒计时数值的立体效果；

3.JavaScript代码也是很简单的一个函数，这里你需要将得到的剩余时间转换为字符串，以便于字符串的截取显示等。另外，用setTimeout函数设置隔1秒执行一次函数，以动态显示剩余时间，当然也可以用setInterval函数，这两个函数设置的效果基本相同。

至此，一个简单的倒计时效果就做出来了。如果要在首页设置弹窗倒计时，你可以把背景设置的更炫酷一点，这样可以吸引用户点击，并设置10秒后弹窗自动消失（或者设置一个关闭按钮等）。

倒计时的实现可以有很多种方式，在这里也就先介绍这一种，以后有时间将会继续总结。