我正在使用脚本来创建一些圆形进度条。 这是一些用于创建它们的标记:
<div class="loader">
<div class="loader-bg">
<div class="text"></div>
</div>
<div class="spiner-holder-one animate-0-25-a">
<div class="spiner-holder-two animate-0-25-b">
<div class="loader-spiner" style=""></div>
</div>
</div>
<div class="spiner-holder-one animate-25-50-a">
<div class="spiner-holder-two animate-25-50-b">
<div class="loader-spiner"></div>
</div>
</div>
<div class="spiner-holder-one animate-50-75-a">
<div class="spiner-holder-two animate-50-75-b">
<div class="loader-spiner"></div>
</div>
</div>
<div class="spiner-holder-one animate-75-100-a">
<div class="spiner-holder-two animate-75-100-b">
<div class="loader-spiner"></div>
</div>
</div>
这是一些js:
function renderProgress(progress)
{
progress = Math.floor(progress);
if(progress<25){
var angle = -90 + (progress/100)*360;
$(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
}
else if(progress>=25 && progress<50){
var angle = -90 + ((progress-25)/100)*360;
$(".animate-0-25-b").css("transform","rotate(0deg)");
$(".animate-25-50-b").css("transform","rotate("+angle+"deg)");
}
else if(progress>=50 && progress<75){
var angle = -90 + ((progress-50)/100)*360;
$(".animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
$(".animate-50-75-b").css("transform","rotate("+angle+"deg)");
}
else if(progress>=75 && progress<=100){
var angle = -90 + ((progress-75)/100)*360;
$(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b")
.css("transform","rotate(0deg)");
$(".animate-75-100-b").css("transform","rotate("+angle+"deg)");
}
$(".text").html(progress+"%");
}`
我想创建3个不同的圆圈但是具有不同的值,例如第一个停在35%,第二个停在50%,第三个停在100%我怎么能这样做?
为了不把整个标记放在这里,我会告诉你一个小提琴,看看它在行动。 这是fiddle
答案 0 :(得分:3)
检查出来
function renderProgress(progress, target, max) {
progress = Math.floor(progress);
if (progress <= max) {
if (progress < 25) {
var angle = -90 + (progress / 100) * 360;
$(target).find(".animate-0-25-b").css("transform", "rotate(" + angle + "deg)");
} else if (progress >= 25 && progress < 50) {
var angle = -90 + ((progress - 25) / 100) * 360;
$(target).find(".animate-0-25-b").css("transform", "rotate(0deg)");
$(target).find(".animate-25-50-b").css("transform", "rotate(" + angle + "deg)");
} else if (progress >= 50 && progress < 75) {
var angle = -90 + ((progress - 50) / 100) * 360;
$(target).find(".animate-25-50-b, .animate-0-25-b").css("transform", "rotate(0deg)");
$(target).find(".animate-50-75-b").css("transform", "rotate(" + angle + "deg)");
} else if (progress >= 75 && progress <= 100) {
var angle = -90 + ((progress - 75) / 100) * 360;
$(target).find(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform", "rotate(0deg)");
$(target).find(".animate-75-100-b").css("transform", "rotate(" + angle + "deg)");
}
if (progress == 100) {
}
$(target).find(".text").html(progress + "%");
}
}
function clearProgress(target) {
$(target).find(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform", "rotate(90deg)");
}
var i = 0;
setInterval(function () {
i++;
if (i > 100) {
i = 0
clearProgress($("#progress-1"));
}
renderProgress(i, $("#progress-1"), 100);
}, 200);
var j = 0
setInterval(function () {
j++;
if (j > 100) {
j = 0
clearProgress($("#progress-2"));
}
renderProgress(i, $("#progress-2"), 80);
}, 200);
var k = 0
setInterval(function () {
k++;
if (k > 100) {
k = 0
clearProgress($("#progress-3"));
}
renderProgress(k, $("#progress-3"), 25);
}, 200);