您的位置：首页 > Web前端 > JavaScript

闪购活动js 【一个倒计时接一个倒计时活动】

2015-04-17 14:45 267 查看
封装倒计时js -闪购活动（一个倒计时接一个倒计时活动）

闪购活动 上个活动结束 下个活动接着开始 以此类推【技术要点：时间的连续】的js代码

应用场景：手机端商城，几分钟活动，手指左右滑动界面到另一个倒计时活动（要求：第一个倒计时活动后，第二个倒计时活动才开始，以此类推）








代码：
<!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







































内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js 倒计时 闪购活动
相关文章推荐
新的分享
章节导航