[前端] 画个圈圈显示百分比

先看效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        @-webkit-keyframes up{
            0%{top: 0%;}
            100%{top:-80%;}
        }
        @-webkit-keyframes down{
            0%{top: 0%;}
            100%{top: 100%;}
        }
        /*父元素设置溢出隐藏,设置宽高度,居中,相对定位*/
        .father{width: 300px;height: 300px;margin:0 auto;overflow: hidden;position: relative;}
        /*遮罩层给父元素一半的宽度*/
        .zhe{position: absolute;width: 50%;height:100%;background: #fff;z-index: 100;}
        /*分别给两个遮罩层添加向上向下走的动画,通过等待时间,实现衔接*/
        .square_left{left: 0%;top:0px;-webkit-animation:up 1s linear 1s;
            animation-fill-mode: forwards;}
        .square_right{left: 50%;top:0px;-webkit-animation:down 1s linear;
            animation-fill-mode: forwards;}
        /*设置圈圈的样式*/    
        .cricle{border:2px solid red;width:296px;height: 296px;border-radius: 50%;z-index: -1}
        #num{font-size: 26px;color:red;margin:0 auto;z-index: 300;
            position: absolute;top: 45%;left:45%;}
    </style>

</head>
<body >
<div class="father">
    <div class="cricle"></div>
    <div class="square_left zhe"></div>
    <div class="square_right zhe"></div>
    <div id="num" ></div>
    <script type="text/javascript">
        var c=0;
        var t;
        timedCount();
    function timedCount()
    {
        if (c==81) {clearTimeout(t);return;}
    
    document.getElementById('num').innerHTML=c+"%";
    c=c+1;
    console.log(t);
    //开始计时,不断重复这个函数,时间间隔25毫秒;动画是2s,这里2000/80=25ms
    t=setTimeout("timedCount()",25)
    }
    </script>
</div>
</body>
</html>

 

posted @ 2016-08-29 12:32  啊啦  阅读(1257)  评论(0)  编辑  收藏  举报