圆环进度条

时间：2016-03-01 18:59:51 阅读：186 评论：0 收藏：0 [点我收藏+]

　　　　圆环进度条，根据环内的数字，实现百分比进度。希望大家多多指点。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <title>圆环进度条</title>
    <style>
        * {margin: 0;padding: 0}
        .container .first {
            left: 10px;
            top: 20px;
        }
        .container .second {
            left: 10px;
            top: 100px;
        }
        .container .third {
            left: 10px;
            top: 180px;
        }
        .container .fourth {
            left: 10px;
            top: 260px;
        }

        .circle {
            width: 74px;
            height: 74px;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            background: #f04f4b;
            position: absolute;
        }
        .circle .circle_left {
            display: block;
            width: 74px;
            height: 74px;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            position: absolute;
            left: 0;
            top: 0;
            clip: rect(0,37px,74px,0)
        }
        .circle .circle_left div,.circle .circle_right div {
            display: block;
            width: 74px;
            height: 74px;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            position: absolute;
            left: 0;
            top: 0;
            background: #eee;
        }
        .circle .circle_left div {clip: rect(0,37px,74px,0)}
        .circle .circle_right div {clip: rect(0,74px,74px,37px)}
        .circle .circle_right {
            display: block;
            width: 74px;
            height: 74px;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            position: absolute;
            left: 0;
            top: 0;
            clip: rect(0,74px,74px,37px)
        }
        .circle span {
            display: block;
            width: 68px;
            height: 68px;
            font-size:  27px;
            text-align: center;
            line-height: 68px;
            background: #fff;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            color: #f04f4b;
            position: absolute;
            top: 3px;
            left: 3px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="circle first">
        <section class="circle_left"><div></div></section>
        <section class="circle_right"><div></div></section>
        <span id="plan_num1">25%</span>
    </div>
    <div class="circle second">
        <section class="circle_left"><div></div></section>
        <section class="circle_right"><div></div></section>
        <span id="plan_num2">50%</span>
    </div>
    <div class="circle third">
        <section class="circle_left"><div></div></section>
        <section class="circle_right"><div></div></section>
        <span id="plan_num3">75%</span>
    </div>
    <div class="circle fourth">
        <section class="circle_left"><div></div></section>
        <section class="circle_right"><div></div></section>
        <span id="plan_num4">100%</span>
    </div>
</div>
<script>
    window.onload = function () {
        circleAnimate(‘plan_num1‘);
        circleAnimate(‘plan_num2‘);
        circleAnimate(‘plan_num3‘);
        circleAnimate(‘plan_num4‘);
        $(‘#app_x‘).on(‘click‘, function () {
            $(this).parent().hide();
        });
        function circleAnimate(which){
            var span = $(‘#‘+which);
            var num = parseInt(span.text());
            var degS = num/100*360;
            if(degS<=180){
                var r = 0;
                var timer = setInterval(function () {
                    r++;
                    if (r>=degS){
                        clearInterval(timer);
                    }
                    span.siblings(‘.circle_right‘).children().css(‘transform‘,"rotate(" + r + "deg)");
                },5)
            }else{
                var r = 0;
                var timer = setInterval(function () {
                    r++;
                    if (r>=degS){
                        clearInterval(timer);
                    }if(r<=180){
                        span.siblings(‘.circle_right‘).children().css(‘transform‘,"rotate(" + r + "deg)")
                    }else{
                        span.siblings(‘.circle_left‘).children().css(‘transform‘,"rotate(" + (r -180) + "deg)")
                    }
                },5)
            }
        }
    }
</script>
</body>
</html>

圆环进度条

原文：http://www.cnblogs.com/caiqingchong/p/5231943.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)