苏宁易购倒计时加封装js

 苏宁易购倒计时

1.首先写一个倒计时框,布局我就不去写了有问题可以提问给大家解释

 

window.onload=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.onload=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>