码迷,mamicode.com
首页 > 其他好文 > 详细

定时器之倒计时效果

时间:2020-03-06 23:58:40      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:add   ast   floor   样式   开启   set   window   返回值   text   

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

代码中所用到的前端样式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();
    }

 

定时器之倒计时效果

标签:add   ast   floor   样式   开启   set   window   返回值   text   

原文地址:https://www.cnblogs.com/starwei/p/12431600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!