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 h3{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 = Time() - Time();//获取现在到倒计时结束时间的毫秒数
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伪类，设置倒计时数值的⽴体效果；
html自动弹出公告代码3.JavaScript代码也是很简单的⼀个函数，这⾥你需要将得到的剩余时间转换为字符串，以便于字符串的截取显⽰等。另外，⽤setTimeout函数设置隔1秒执⾏⼀次函数，以动态显⽰剩余时间，当然也可以⽤setInterval函数，这两个函数设置的效果基本相同。
⾄此，⼀个简单的倒计时效果就做出来了。如果要在⾸页设置弹窗倒计时，你可以把背景设置的更炫酷⼀点，这样可以吸引⽤户点击，并设置10秒后弹窗⾃动消失（或者设置⼀个关闭按钮等）。
倒计时的实现可以有很多种⽅式，在这⾥也就先介绍这⼀种，以后有时间将会继续总结。
以上所述就是本⽂的全部内容了，希望能够对⼤家了解javascript有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。