简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 不使用jQuery只用js+css如何实现带百分比的环形进度条？
大家讲道理
大家讲道理 2017-04-10 16:04:32
0
2
960

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

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

reply all(2)
Peter_Zhu
Peter_Zhu2017-04-10 16:06:32 2 floor 
<!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>

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

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-04-10 16:06:32 1 floor

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

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！