苏宁易购倒计时
1.首先写一个倒计时框,布局我就不去写了有问题可以提问给大家解释
window.οnlοad=function(){
var oBox=document.getElementsClassName('box');
var oS=document.getElementsTagName('span')[0];
var oP=document.getElementsTagName('p')[0];
var timer=null;
var timer2=null;
var s=6; //这6秒是页面文档里面的值
timer=setInterval(function{
s--
if(s==0){
clearInterval(timer); //清除定时器
oS.className='start' //调用css里面的class提前准备好的
oS.innerHTML='正在拍卖'
var h=3;
timer2=setInterval(function){
h--
if(h==0){
clearInnerval(timer2);
oS.className='end'
oS.innerHTML='拍卖结束'
}
oP.innerHTML=h;
}
}
oP.innerHTML=s; //赋值
},1000);
};
第二部来实现多个 这样的倒计时框 就是咱们的封装
布局写下吧!
<style>
*{margin:0; padding:0; list-style:none;}
li{width:200px; height:300px; border:1px solid red; position:relative;}
li span{position:absolute; right:0; top:0;background:yellow;}
li p{ position:absolute; bottom:0; left:0; right:0; text-align:center;}
li .start{background:orangered;}
li .end{background:black;}
</style>
<script>
function countDown(oBox,i){
var oS=oBox.getElementsByTagName('span')[0];
var oP=oBox.getElementsByTagName('p')[0];
var timer=null;
var timer2=null;
var s=[5,6,7,8];
var h=[3,4,5,6];
timer=setInterval(function{
s[i]--
if (s[i]==0){
clearInterval(timer);
oS.innerHTML='正在拍卖';
oS.ClassName='start';
timer2=setInterval(function(){
h[i]--
if(h[i]==0){
clearInterval(timer);
oS,ClassName='end';
oS,innerHTML='拍卖结束';
}
oP.innerHTML=h[i];
},1000);
}
oP.innerHTML=s[i];
}1000);
};
window.οnlοad=function(){
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
countDown(aLi[i],i);
}
};
</script>
<ul >
<li >
<span>即将开始</span>
<p>5</p>
</li>
<li>
<span>即将开始</span>
<p>5</p>
</li>
<li>
<span>即将开始</span>
<p>5</p>
</li>
<li>
<span>即将开始</span>
<p>5</p>
</li>
</ul>