如何使百分比填满jQuery + JS [英] How to make percentage filling up with jquery + js
本文介绍了如何使百分比填满jQuery + JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究使百分比数增加的项目，同时在百分比数内有需要根据百分比本身填充的背景色. 到目前为止，它是有效的，但仅是背景动画本身.我的意思是，如果它的百分比是50％，则需要达到50％的一半.如果它是100，则需要使100％数字的所有背景都变成彩色.这是html和css的相对代码.
I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself. So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and 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>
推荐答案
添加CSS或HTML的方法是添加滚动条.删除滚动条，整个动画将在一帧内.
The way you have added CSS or HTML is by adding the scrollbar. Remove the scrollbar and the whole animation will be in one frame.
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
