찾다

 >  Q&A  >  본문

javascript - 不使用jQuery只用js+css如何实现带百分比的环形进度条?

环形进度条在网上很多都是基于jQuery实现的,如果在不使用jQuery的情况下,仅用js+css如何实现环形进度条呢?

大家讲道理大家讲道理2873일 전1037

모든 응답(2)나는 대답할 것이다

  • 天蓬老师

    天蓬老师2017-04-10 16:06:32

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    <code><!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        body {

                font-family: "微软雅黑";

            }

            .circle {

                width: 200px;

                height: 200px;

                position: absolute;

                border-radius: 50%;

                background: #0cc;

            }

            .pie_left, .pie_right {

                width:200px;

                height:200px;

                position: absolute;

                top: 0;left: 0;

            }

            .left, .right {

                width:200px;

                height:200px;

                background:#00aacc;

                border-radius: 50%;

                position: absolute;

                top: 0;

                left: 0;

            }

            .pie_right, .right {

                clip:rect(0,auto,auto,100px);

            }

            .pie_left, .left {

                clip:rect(0,100px,auto,0);

            }

            .mask {

                width: 150px;

                height: 150px;

                border-radius: 50%;

                left: 25px;

                top: 25px;

                background: #FFF;

                position: absolute;

                text-align: center;

                line-height: 150px;

                font-size: 20px;

                font-weight: bold;

                color: #00aacc;

            }

        </style>

         

    </head>

    <body>

        <p class="circle" style="left:0">

            <p class="pie_left"><p class="left"></p></p>

            <p class="pie_right"><p class="right"></p></p>

            <p class="mask"><span>0</span>%</p>

        </p>

         

        <script type="text/javascript">

            //addPercent(30);

            function addPercent(num){

              if(num>100)return;

              var c=document.getElementsByClassName("circle")[0];

              c.getElementsByTagName("span")[0].innerHTML=num;

              num=num*3.6;

              if(num<=180){

                c.getElementsByClassName("right")[0].style.transform="rotate(" + num + "deg)";

              }else{

                c.getElementsByClassName("right")[0].style.transform="rotate(180deg)";

                c.getElementsByClassName("left")[0].style.transform="rotate(" + (num - 180) + "deg)";

              }

               

            }

             

            var count=0;

            var t=setInterval(function(){

              if(count>100){

                clearInterval(t);

              }

              addPercent(++count);

            },200);

        </script>

    </body>

    </html></code>

    这个随便找个就能翻译成js的。。还有就是我简单翻译了一下没有封装,没有管怎么调用

    회신하다
    0
  • 天蓬老师

    天蓬老师2017-04-10 16:06:32

    可以参考一下w3cplus的这篇文章:用CSS和SVG制作饼图

    环形的话饼图内遮个小圆就可以了哈。

    회신하다
    0
  • 취소회신하다