封装倒计时js -闪购活动(一个倒计时接一个倒计时活动)
闪购活动 上个活动结束 下个活动接着开始 以此类推【技术要点:时间的连续】的js代码
应用场景:手机端商城,几分钟活动,手指左右滑动界面到另一个倒计时活动(要求:第一个倒计时活动后,第二个倒计时活动才开始,以此类推)
代码:
1
2
3
4
5
6
7
8
9
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>闪购活动 上个活动结束 下个活动接着开始 以此类推</
title
>
</
head
>
<
body
>
<
script
>
function countDown( maxtime,_times,liu,fn )
{
var liu = document.getElementById(liu);
var timer = setInterval(function()
{
if(maxtime>=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
if(minutes<
10
){
minutes
=
"0"
+minutes;
}
if(seconds<10){
seconds
=
"0"
+seconds;
}
if(maxtime > _times){
msg = "--:--";
liu.style.display="none";
}else{
msg = ""+minutes+":"+seconds+"";
liu.style.display="";
};
fn( msg );
--maxtime;
}
else{
clearInterval( timer );
fn("00:00");
liu.style.display="",liu.innerHTML="结束";
}
}, 1000);
}
</
script
>
<
div
id
=
"timer1"
style
=
"color:red"
>--:--</
div
>
<
div
id
=
"timer2"
style
=
"color:red"
>--:--</
div
>
<
div
id
=
"timer3"
style
=
"color:red"
>--:--</
div
>
<
div
id
=
"cont1"
style
=
"color:red; display:none;"
>价格:888</
div
>
<
div
id
=
"cont2"
style
=
"color:red; display:none;"
>价格:999</
div
>
<
div
id
=
"cont3"
style
=
"color:red; display:none;"
>价格:555</
div
>
<
script
>
//注意这里的这些活动是在当前本地之间为背景下的
var EndTime= new Date('2015/04/17 14:35:00');//结束时间
var startTime= new Date('2015/04/17 14:30:00');//开始时间
var EndTime2= new Date('2015/04/17 14:40:00');//结束时间
var startTime2= new Date('2015/04/17 14:35:01');//开始时间
var EndTime3= new Date('2015/04/17 14:45:00');//结束时间
var startTime3= new Date('2015/04/17 14:40:01');//开始时间
var NowTime = new Date();
var _time = (EndTime.getTime() - startTime.getTime())/1000;
var _time2 = (EndTime2.getTime() - startTime2.getTime())/1000;
var _time3 = (EndTime3.getTime() - startTime3.getTime())/1000;
var t =(EndTime.getTime() - NowTime.getTime())/1000;
var t2 =(EndTime2.getTime() - NowTime.getTime())/1000;
var t3 =(EndTime3.getTime() - NowTime.getTime())/1000;
countDown( t,_time,"cont1",function( msg )
{
document.getElementById('timer1').innerHTML = msg;
});
countDown( t2,_time2,"cont2",function( msg )
{
document.getElementById('timer2').innerHTML = msg;
})
countDown( t3,_time3,"cont3",function( msg )
{
document.getElementById('timer3').innerHTML = msg;
})
</
script
>
</
body
>
</
html
>
|
源码下载地址:
http://down.51cto.com/data/2039771
本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1633869,如需转载请自行联系原作者