定时器之倒计时效果

Posted 2021-03-07 starwei

一、倒计时所对应的前段代码和样式

代码中所用到的前端样式css：nth-last-of-type(n)  //选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。

　　　　　　　　　　　　　:nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计数。

相关前端代码：

<ul>
        <li  class="clock">
            <span>0</span>
            <span>0</span>
            <span>:</span>
            <span>0</span>
            <span>0</span>
            <span>:</span>
            <span>0</span>
            <span>0</span>
        </li>
    </ul>

其中用到的一些样式：

*{
    margin:0px;
    padding:0px;
 }
            
    ul li > span{
        color:white;
        margin:10px 0px;
        width: 13px;
            height: 18px;
           display: inline-block;
            line-height: 18px;
            background-color: #000;
            text-align: center;
        } 
    ul li span:nth-last-of-type(3n){
/*规定属于其父元素的第二个span 元素的每span，从最后一个子元素开始计数*/    background-color:transparent;  /*transparent  透明*/
         color: #000;
        }

二、设置定时器倒计时的js代码和开启定时器  setInterval(function(){ }，1000) 函数,

clearInterval () ,清除定时器函数。

/*3.开启定时器*/
    var timerId=setInterval(function(){
        totalTime--;
        /*判断倒计时时间是否已经完成*/
        if(totalTime < 0){
            /*清除时钟*/
            clearInterval(timerId);
            return;  //return  ; 不填写数据表示不返回值，如返回值，则结果为return 1;
        }
        /*得到剩余时间中的  时  分  秒*/
        /*获取时*/
        var hour=Math.floor(totalTime/3600);
        
        /*获取分*/
        var minute=Math.floor(totalTime%3600/60);
        
        /*获取秒*/
        var second=Math.floor(totalTime%60);
        /*赋值，将时间填充到span中  12*/
        spans[0].innerhtml=Math.floor(hour/10);
        spans[1].innerHTML=Math.floor(hour%10);

        spans[3].innerHTML=Math.floor(minute/10);
        spans[4].innerHTML=Math.floor(minute%10);

        spans[6].innerHTML=Math.floor(second/10);
        spans[7].innerHTML=Math.floor(second%10);
    },1000);
}
    //调用该函数
    window.onload=function(){
        timeBack();
    }