JQ百分比封装

qq_36267281

已于 2022-06-19 13:45:05 修改

阅读量80

点赞数

文章标签： css3 html 前端 jquery

于 2022-06-16 15:00:11 首次发布

本文链接：https://blog.csdn.net/qq_36267281/article/details/125316138

版权

文章目录

一、一个JQ百分比封装
- 1.记录一个jq的环形百分比

一、一个JQ百分比封装

1.记录一个jq的环形百分比

代码如下（示例）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link>
<meta name="page-view-size" content="640*530">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<style>
  .wapper {
    box-sizing: border-box;
    position: relative;
  }

  .text {
    position: absolute;
    text-align: center;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    color: indianred;
  }

  .rect {
    position: absolute;
    overflow: hidden;
  }

  .circle {
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid indianred;
  }

  .circle_right {
    transform: rotate(0deg);
    transition: transform linear;
  }

  .circle_left {
    transform: rotate(0deg);
    transition: transform linear;
  }
</style>

<body>
  <div class="wapper" id="bfb"></div>
</body>
<script type="text/javascript">
  //初始化百分比盒子方法
  //调用参数  element 为盒子id   例如  #bfb
  // num      0-100 的百分比数值  例如  68.5
  // elementConfig   一些盒子的参数,当前只有盒子大小一个配置,例如传入  {size:400}
  function percent(element, num, elementConfig) {
    elementConfig = elementConfig ? elementConfig : {};
    var size = elementConfig.size ? elementConfig.size : 100;
    var transitionDuration = elementConfig.transitionDuration ? elementConfig.transitionDuration : 5;
    if (num < 0 || num > 100) {
      console.log('百分比不能小于0或者大于100')
      return;
    }

    function initElement(element, num) {
      $(element).html(`
      <div class="rect right"><div class="circle circle_right"></div></div>
      <div class="rect left"><div class="circle circle_left"></div></div>
      <div class="text"><span class="num">0%</span></div>`);
      //初始化最外面盒子
      $(element).css('width', size + 'px');
      $(element).css('height', size + 'px');
      //初始化文字
      $(element).find('.text').css('width', size + 'px');
      $(element).find('.text').css('height', size + 'px');
      $(element).find('.text').css('lineHeight', size + 'px');
      //初始化百分比外层盒子
      $(element).find('.rect').css('width', size / 2 + 'px');
      $(element).find('.rect').css('height', size + 'px');
      $(element).find('.rect.right').css('left', size / 2 + 'px');
      //初始化百分比盒子
      $(element).find('.rect .circle').css('width', size + 'px');
      $(element).find('.rect .circle').css('height', size + 'px');
      $(element).find('.rect .circle.circle_right').css('left', '-' + size / 2 + 'px');
      $(element).find('.rect .circle.circle_right').css('clip', 'rect(0px ' + size / 2 + 'px +' + size + 'px 0px)');
      $(element).find('.rect .circle.circle_left').css('clip', 'rect(0px ' + size + 'px +' + size + 'px ' + size / 2 + 'px)');
    }

    //设置百分比以及百分比动画
    function setPar(element, num) {
      var showNum = 0;
      var ParSetInterval = setInterval(function() {
        showNum++;
        if (showNum <= num) {
          $(element).find('.num').text(showNum + '%');
        } else {
          $(element).find('.num').text(num + '%');
          clearInterval(ParSetInterval);
        }
      }, transitionDuration * 10);

      if (num <= 50) {
        $(element).find('.circle_right').css('transitionDuration', '' + num / 100 * transitionDuration + 's')
        setTimeout(function() {
          $(element).find('.circle_right').css('transform', 'rotate(' + num / 50 * 180 + 'deg)');
        }, 0)
      } else {
        $(element).find('.circle_right').css('transitionDuration', 0.5 * transitionDuration + 's')
        $(element).find('.circle_left').css('transitionDuration', (num - 50) / 100 * transitionDuration + 's')
        $(element).find('.circle_left').css('transitionDelay', 0.5 * transitionDuration + 's')
        setTimeout(function() {
          $(element).find('.circle_right').css('transform', 'rotate(' + 180 + 'deg)');
          $(element).find('.circle_left').css('transform', 'rotate(' + (num - 50) / 50 * 180 + 'deg)');
        }, 0)
      }
    }
    initElement(element, num);
    setPar(element, num);
  }




  $(function() {
    percent('#bfb', 68.5);
  })
</script>

</html>