在前端开发中，难免会用到倒计时。如做的双十一活动，在距活动开始的半个月前需要做些宣传工作，需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时，如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期，特别是在距活动结束仅有1天左右时，就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部（当然也可以设置在其它地方，如首页中部等），并设置弹窗弹出10秒后自动消失，由用户决定是否点击到相应的活动页面，购买产品。
需要的技术支持：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>
|
这是我自己写的倒计时效果，当然每个人都可以根据自己的爱好，设置倒计时的效果。如你可以只显示“几天几时几分”，但个人觉得没有设置到“几天几时几分几秒”够气氛。这里的样式也都可以根据自己的喜好改动，但最终的效果都是制造活动开始前的火热氛围。
至于这里的html代码、css代码及JavaScript代码需要注意的也说下：
1.html代码就不多说，主要就是怎么设置dom，以易于JavaScript操作；
2.css代码，这里主要用了:before与:after伪类，设置倒计时数值的立体效果；
3.JavaScript代码也是很简单的一个函数，这里你需要将得到的剩余时间转换为字符串，以便于字符串的截取显示等。另外，用setTimeout函数设置隔1秒执行一次函数，以动态显示剩余时间，当然也可以用setInterval函数，这两个函数设置的效果基本相同。
至此，一个简单的倒计时效果就做出来了。如果要在首页设置弹窗倒计时，你可以把背景设置的更炫酷一点，这样可以吸引用户点击，并设置10秒后弹窗自动消失（或者设置一个关闭按钮等）。
倒计时的实现可以有很多种方式，在这里也就先介绍这一种，以后有时间将会继续总结。