javascript - 如何用jquery + js填充百分比
问题描述
我正在研究增加百分比数字的项目,同时在百分比数字内部有需要根据百分比本身填充的背景颜色。到目前为止,它正在工作,但只是其自身的背景动画。我的意思是,如果它的 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>
解决方案
添加 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>
推荐阅读
- javascript - React Router如何使用props?
- django - Django 通过 CharField 过滤对象,最多包含两个单词
- json - 如何更新 JObject 中的对象值
- r - 将可选参数传递给函数,三个点
- javascript - Expand 和 useArrows 不适用于 Treepanel
- javascript - jQuery删除具有特定数据属性的整个脚本
- python - Pandas diff SeriesGroupBy 比较慢
- c - 分段错误后如何获取 RIP?
- c# - c#如何将int数组转换为字符串二进制数组
- ionic3 - 如何在 ionic 中嵌入 javascript 播放器?