如何用 jquery + js 填充百分比

Question

我正在做一个项目来增加百分比数字，同时在百分比数字里面有背景颜色需要根据百分比本身来填充。到目前为止它正在工作，但只有它自己的背景动画。我的意思是，如果是 50%，则需要达到 50% 数字的一半。如果它是 100，则需要为 100% 数字的所有背景着色。下面是html和css的相关代码。

var i = 0;

var perc = 0;

function buttonClick6() {

  perc += 5;
  document.getElementById('here').innerHTML = percentage(perc) + "%";
}

function buttonClick5() {
  i += 5;
  document.getElementById('demo').innerHTML = "€" + i;
}

function percentage(per) {
  return (100 / 100) * per;
}
$(document).ready(function() {
  var skillBar = $('.inner');
  var skillVal = skillBar.attr("data-progress");
  $(skillBar).animate({
    height: skillVal
  }, 2100);

});

body {
  position: absolute;
  width: 1670px;
  height: 1030px;
  font-family: arial;
  background-color: black;
}

.outer {
  width: 100%;
  height: 386px;
  overflow: hidden;
  position: relative;
  margin-top: 300px;
  text-align: center;
}

.inner {
  background: url(color3.jpg);
  bottom: 0;
  height: 0%;
  width: 100%;
  overflow: hidden;
  animation: animateMid 15s linear infinite;
  -webkit-background-clip: text;
  position: absolute;
}

.inner h2 {
  font-size: 500px;
  margin-top: -95px;
  color: rgba(225, 225, 225, .1);
}

@keyframes animateMid {
  0% {
    background-position: left 800px top 500px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="skill">
    <div class="outer">
      <div class="inner" data-progress="100%">
        <h2 id="demo">0</h2>
        <div></div>
      </div>
    </div>
  </div>



  <div class="perc">
    <h3 id="here">0%</h3>
  </div>

  <button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

Answer 1

您添加 CSS 或 HTML 的方法是添加滚动条。去掉滚动条，整个动画就在一帧内了。

 var i = 0;

        var perc = 0;

        function buttonClick6() {

            perc += 5;
            document.getElementById('here').innerHTML = percentage(perc) + "%";
            document.getElementById('demo2').style.height = (125 - percentage(perc)) + "%";
        }

        function buttonClick5() {
            i += 5;
            document.getElementById('demo').innerHTML = "€" + i;
            document.getElementById('demo2').innerHTML = "€" + i
        }

        function percentage(per) {
            return (100 / 100) * per;
        }

        $(document).ready(function() {
            var skillBar = $('.inner');
            var skillVal = skillBar.attr("data-progress");
            $(skillBar).animate({
                height: skillVal
            }, 2100);

        });

body {
            position: absolute;
            width: 1670px;
            height: 1030px;
            font-family: arial;
            background-color: black;
        }
        
        .outer {
            width: 100%;
            height: 386px;
            overflow: hidden;
            position: relative;
            margin-top: 300px;
            text-align: center;
        }
  
  h3{
   color: white;
  }
        
        .inner {
    background: url(color3.jpg);
    bottom: 0;
    height: 0%;
    width: 100%;
    overflow: hidden;
    animation: animateMid 15s linear infinite;
    -webkit-background-clip: text;
    position: absolute;
}
        
        .inner h2 {
            font-size: 500px;
            margin-top: -95px;
            color: #fff;
        }
        
        @keyframes animateMid {
            0% {
                background-position: left 800px top 500px;
            }
        }

p {
    color: transparent;
    font-size: 500px;
    top: -95px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 130%;
    margin: 0;
    position: absolute;
    font-weight: bold;
    background: #2c2c2c;
    background-clip: text;
    -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
        <div class="outer">
            <div class="inner" data-progress="100%" data-value="0">
   <p id="demo2">0</p>
                <h2 id="demo">0</h2>
                <div></div>
            </div>
        </div>
    </div>

    <div class="perc">
        <h3 id="here">0%</h3>
    </div>

    <button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

如何用 jquery + js 填充百分比

How to make percentage filling up with jquery + js

html

javascript

css

jquery-animate