环形占比图

sunsineq

已于 2023-07-17 14:24:07 修改

阅读量173

点赞数

分类专栏： jquery CSS 文章标签： jquery

于 2023-06-30 16:19:24 首次发布

本文链接：https://blog.csdn.net/sunsineq/article/details/131479097

版权

CSS 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
   <style>
       .circle {
           /*width:200px;
       height:200px;*/
       width: 150px;
       height: 150px;
       position: absolute;
       border-radius: 50%;
       /*background: #0cc;*/
       background: #0B2DFF;
       /*border: #f00 solid 1px;*/
       }
       .pie_left, .pie_right {
           /*width:200px;
       height:200px;*/
       width: 150px;
       height: 150px;
       position: absolute;
       top: 0;left: 0;
       }
       .left, .right {
       display: block;
       /*width:200px;
       height:200px;*/
       width:150px;
       height:150px;
       /*background:#00aacc;*/
       background:#AFB9F9;
       border-radius: 50%;
       position: absolute;
       top: 0;
       left: 0;
       /*transform: rotate(30deg);*/
       transform: rotate(0deg);
       }
       .pie_right, .right {
       /*clip:rect(0,auto,auto,100px);*/
       clip:rect(0,auto,auto,75px);
       }
       .pie_left, .left {
           /*clip:rect(0,100px,auto,0);*/
       clip:rect(0,75px,auto,0);
       }
       .mask {
       /*width: 150px;
       height: 150px;*/
       width: 112.5px;
       height: 112.5px;
       border-radius: 50%;
       /*left: 25px;
       top: 25px;*/
       left: 18px;
       top: 18px;
       background: #FFF;
       position: absolute;
       text-align: center;
       line-height: 112.5px;
       font-size: 16px;
       }
   </style>
   <div class="circle">
   <div class="pie_left"><div class="left"></div></div>
   <div class="pie_right"><div class="right"></div></div>
   <div class="mask"><span>10</span>%</div>
   </div>
   <script>
       $(function() {
       $('.circle').each(function(index, el) {
       var num = $(this).find('span').text() * 3.6;
       if (num<=180) {
       $(this).find('.right').css('transform', "rotate(" + num + "deg)");
       } else {
       $(this).find('.right').css('transform', "rotate(180deg)");
       $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
       };
       });