[CSS/JS]圆形不封闭进度条实现

最新推荐文章于 2024-05-07 15:08:09 发布

Tiger_wa

最新推荐文章于 2024-05-07 15:08:09 发布

阅读量1.6k

点赞数 2

分类专栏： CSS 文章标签：圆形进度条 css

本文链接：https://blog.csdn.net/qq_38136543/article/details/84840717

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

圆形不封闭进度条实现

数值为0 数值为80 数值为100
如上图所示，如何实现这种圆形且不封闭的进度条
我的思路是：
首先建立一个div装这个进度条，并将其旋转-120度
在这里插入图片描述
将其分为两个相等的div

两边各画一个圆，将圆加上border变成圆环，将一半的圆环颜色置为透明，在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果，实现进度条底色的显示

再在两边绘制两个圆环，通过让一半圆环透明变成两个半圆环，颜色换成进度条颜色，再经过旋转达到初始位置，左半圆是红色，右半圆是黄色，排布如下图
在这里插入图片描述
在输入数值后，通过js的运算判断，两个圆环旋转达到以下效果

将两种圆环的颜色换成相同颜色后，就完美实现效果

源代码如下

<!DOCTYPE html>
<html>

<head>
  <title>圆形未封闭进度条</title>
</head>

<body>
  <div class="container">
    <div class="progress">
      <div class="wrapper right">
        <div class="circle rightcircle-box"></div>
        <div class="circle rightcircle" id="right"></div>
      </div>
      <div class="wrapper left">
        <div class="circle leftcircle-box"></div>
        <div class="circle leftcircle" id="left"></div>
      </div>
    </div>
    <div class="input">
      <input type="text" id="num">
      <button id="btn">点击</button>
    </div>
    <p id="score"></p>
  </div>
  
  <script type="text/javascript">
  function circleOfScore(index) {
    var score = index ? index : 0;
    var right = 100 * 180 / 270;
    var left = 100 - right;
    var rightDeg;
    var leftDeg;
    var rightCircle = document.getElementById("right");
    var leftCircle = document.getElementById("left");
    var scorenum = document.getElementById("score");
    scorenum.innerHTML = index;

    if (score <= right) {
      rightDeg = score / right * 180 - 135;
      leftDeg = -135;
    } else if (score < 100) {
      rightDeg = 45;
      leftDeg = (score - right) / 100 * 135 - 135;
    } else {
      rightDeg = 45;
      leftDeg = -75;
    }

    rightCircle.style.transform = 'rotate(' + rightDeg + 'deg)';
    leftCircle.style.transform = 'rotate(' + leftDeg + 'deg)';

  }

  var btn = document.getElementById("btn");
  btn.onclick = function() {
    var num = document.getElementById("num").value;
    circleOfScore(num);
  }
  </script>
  <style type="text/css">
  /* 圆环 */
  .container {
    width: 475px;
    height: 600px;
  }


  .progress {
    position: relative;
    width: 400px;
    height: 400px;
    bottom: -40px;
    top: 206px;
    left: 268px;
    transform: rotate(-120deg);
  }

  .progress .wrapper {
    width: 200px;
    height: 400px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .progress .left {
    left: 0;
  }

  .progress .right {
    right: 0;
  }

  .progress .circle {
    width: 384px;
    height: 384px;
    border: 8px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
  }

  .progress .rightcircle-box {
    border-top: 8px solid #99edd1;
    border-right: 8px solid #99edd1;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    right: 0;
    transform: rotate(45deg);
  }

  .progress .leftcircle-box {
    border-bottom: 8px solid #99edd1;
    border-left: 8px solid #99edd1;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 0;
    transform: rotate(-75deg);
  }

  .progress .rightcircle {
    border-top: 8px solid yellow;
    border-right: 8px solid yellow;
    animation: mymove 5s infinite;
    right: 0;
  }

  .progress .leftcircle {
    border-bottom: 8px solid yellow;
    border-left: 8px solid yellow;
    left: 0;
  }

  p {
    position: absolute;
    z-index: 3;
    top: 257px;
    left: 240px;
    width: 475px;
    font-size: 81px;
    text-align: center;
  }

  .input {
    position: absolute;
    top: 560px;
    left: 405px;
  }

  .input input {
    width: 100px;
    height: 60px;
    font-size: 40px;
  }

  .input button {
    height: 50px;
    width: 80px;
  }
  </style>
</body>

</html>

Tiger_wa

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
[CSS/JS]圆形不封闭进度条实现

圆形不封闭进度条实现如上图所示，如何实现这种圆形且不封闭的进度条我的思路是：首先建立一个div装这个进度条，并将其旋转-120度将其分为两个相等的div两边各画一个圆，将圆加上border变成圆环，将一半的圆环颜色置为透明，在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果，实现进度条底色的显示再在两边绘制两个圆环，通过让一半圆环透明变成两个半圆环，...
复制链接

扫一扫