在前端开发中，难免会用到倒计时。如做的双十一活动，在距活动开始的半个月前需要做些宣传工作，需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时，如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期，特别是在距活动结束仅有1天左右时，就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部（当然也可以设置在其它地方，如首页中部等），并设置弹窗弹出10秒后自动消失，由用户决定是否点击到相应的活动页面，购买产品。
需要的技术支持：CSS3，jQuery库；
HTML代码如下：
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;}
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);//在
首页设置的弹窗
效果，在
分页这段
代码可以不设置
