javascript实现倒计时并弹窗提示特效
在前端开发中,难免会用到倒计时。如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期,特别是在距活动结束仅有1天左右时,就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部(当然也可以设置在其它地方,如首页中部等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的活动页面,购买产品。
需要的技术支持:CSS3,jQuery库;
HTML代码如下:
<sectionclass="the_body"> <divclass="countdown"> <h3>距中国雄于地球之日还有</h3> <divclass="countdown_time"> <spanclass="the_days"><i>0</i><i>3</i></span> <iclass="date_text">天</i> <spanclass="the_hours"><i>0</i><i>7</i></span> <iclass="date_text">时</i> <spanclass="the_minutes"><i>4</i><i>7</i></span> <iclass="date_text">分</i> <spanclass="the_seconds"><i>1</i><i>1</i></span> <iclass="date_text">秒</i> </div> </div> </section>
css代码如下:
.the_body{width:100%;max-width:640px;min-width:320px;margin:0auto;} .countdown{background:#ffec20;padding:10px0;} .countdownh3{margin:0;padding:5px0;color:#f53544;text-align:center;font-size:14px;} .countdown.countdown_time{display:block;width:100%;text-align:center;} .countdown.countdown_timei{display:inline-block;position:relative;padding:03px;font-style:normal;background:#fff; margin:02px;border-radius:3px;box-shadow:0px1px1px#ccc;border-bottom:1pxsolid#cfcfcf;font-weight :bold;} .countdown.countdown_timei:after{content:"";width:100%;border:1pxsolid#cfcfcf;border-width:1px00;position:absolute; bottom:1px;left:0;} .countdown.countdown_timei:before{content:"";width:100%;border:1pxsolid#cfcfcf;border-width:1px00;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> functionremaintime(){ vardate=newDate("Jan1,201500:00:00");//设置倒计时结束时间 varnowdate=newDate();//获取当前日期 varremaintime=date.getTime()-nowdate.getTime();//获取现在到倒计时结束时间的毫秒数 varremainday=Math.floor(remaintime/(1000*60*60*24));//计算求得剩余天数 varremainhour=Math.floor((remaintime-remainday*1000*60*60*24)/(1000*60*60));//计算求得剩余小时数 varremainminute=Math.floor((remaintime-remainday*1000*60*60*24-remainhour*1000*60*60)/(1000*60));//计算求得剩余分钟数 varremainsecond=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_daysi:first-child").html(remainday.substr(0,1)); $(".the_daysi:last-child").html(remainday.substr(1,2)); $(".the_hoursi:first-child").html(remainhour.substr(0,1)); $(".the_hoursi:last-child").html(remainhour.substr(1,2)); $(".the_minutesi:first-child").html(remainminute.substr(0,1)); $(".the_minutesi:last-child").html(remainminute.substr(1,2)); $(".the_secondsi:first-child").html(remainsecond.substr(0,1)); $(".the_secondsi: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秒后弹窗自动消失(或者设置一个关闭按钮等)。
倒计时的实现可以有很多种方式,在这里也就先介绍这一种,以后有时间将会继续总结。
以上所述就是本文的全部内容了,希望能够对大家了解javascript有所帮助。