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

时间:2021-12-10 23:38:34

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

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

需要的技术支持:CSS3,jQuery库;

HTML代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
< 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代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.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代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>

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

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

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

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

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

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

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

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