4个进度条由JS管理
4 progress bars managment by JS
我需要让 4 个柱同时工作,没有重复的 JS 代码。也许使用 foreach 或其他东西,带索引。其实我不是专业的js用户,所以不能自己改进它(((((((((((
// Progress bar
let number = document.getElementById('number');
let counter = 0;
setInterval(() => {
if(counter == 65) {
clearInterval();
} else {
counter += 1;
number.innerHTML = counter + "%";
}
}, 28);
// progress bar
.bar {
width: 110px;
height: 110px;
position: relative;
transform: scale(0.8);
}
.bar:not(:last-child) {
margin-right: 50px;
}
.bar__text {
text-align: center;
font-size: 14px;
line-height: 19px;
color: #2E2D2E;
margin-top: 5px;
}
.outer {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
}
.inner {
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,.2),
inset 4px 4px 6px -1px rgba(255,255,255,0.7),
-0.5px -0.5px 0px rgba(255,255,255,1),
0.5px 0.5px 0px rgba(0,0,0,.15),
0px 12px 10px -10px rgba(0,0,0,.05);
position: absolute;
inset: 0;
margin: auto;
}
#number {
font-weight: 600;
color: #2E2D2E;
}
.bar svg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
circle {
fill: none;
stroke: url(#GradientColor);
stroke-width: 5px;
stroke-dasharray: 478;
stroke-dashoffset: 478;
animation: anim 2s linear forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 250;
}
}
<div class="progress__bars bars">
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Hits
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Hits
</div>
</div>
</div>
添加片段。有一些文物,但没关系。仍在片段中工作
啊有些描述要求好无聊XD
我在这里制作了一个可重复使用的进度指示器,其工作方式类似于反应钩子。
更新了它,所以它使用元素,而不是您使用的 SVG。
const bar1 = document.getElementById('bar1');
const bar2 = document.getElementById('bar2');
const bar3 = document.getElementById('bar3');
const bar4 = document.getElementById('bar4');
function progressBar(target, value = 0) {
const progress = document.createElement("progress");
progress.max = 100;
progress.value = 0;
target.appendChild(progress)
return [
() => value,
(add) => {
value += add;
if (value >= 100) {
progress.value = 100;
return;
}
progress.value = value;
},
];
}
const [progress1, addProgress1] = progressBar(bar1);
const [progress2, addProgress2] = progressBar(bar2);
const [progress3, addProgress3] = progressBar(bar3);
const [progress4, addProgress4] = progressBar(bar4);
setInterval(() => addProgress1(Math.ceil(Math.random() * 10)), 100)
setInterval(() => addProgress2(Math.ceil(Math.random() * 10)), 200)
setInterval(() => addProgress3(Math.ceil(Math.random() * 10)), 150)
setInterval(() => addProgress4(Math.ceil(Math.random() * 10)), 50)
<div class="bar">
<div class="outer">
<div class="inner">
<div id="bar1" />
<div id="bar2" />
<div id="bar3" />
<div id="bar4" />
</div>
</div>
<div class="bar__text">
Today's Visitors
</div>
</div>
为每个条形元素指定一个 class 名称和唯一 ID。然后访问 class 并简单地遍历所有 classes,设置值并对它们应用条件。
//get all the class
let item = document.querySelectorAll('.number');
let counter = 0;
for(var i=0; i < item.length; i++)
{
//set progress bar for each individual id property
var classId = item[i].id;
let number = document.getElementById(classId);
setInterval(() => {
if(counter == 65) {
clearInterval();
} else {
debugger;
counter += 1;
number.innerHTML = counter + "%";
}
}, 28);
}
<div class="progress__bars bars">
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number1">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number2">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number3">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Hits
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number4">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Hits
</div>
</div>
</div>
</div>
我需要让 4 个柱同时工作,没有重复的 JS 代码。也许使用 foreach 或其他东西,带索引。其实我不是专业的js用户,所以不能自己改进它(((((((((((
// Progress bar
let number = document.getElementById('number');
let counter = 0;
setInterval(() => {
if(counter == 65) {
clearInterval();
} else {
counter += 1;
number.innerHTML = counter + "%";
}
}, 28);
// progress bar
.bar {
width: 110px;
height: 110px;
position: relative;
transform: scale(0.8);
}
.bar:not(:last-child) {
margin-right: 50px;
}
.bar__text {
text-align: center;
font-size: 14px;
line-height: 19px;
color: #2E2D2E;
margin-top: 5px;
}
.outer {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
}
.inner {
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,.2),
inset 4px 4px 6px -1px rgba(255,255,255,0.7),
-0.5px -0.5px 0px rgba(255,255,255,1),
0.5px 0.5px 0px rgba(0,0,0,.15),
0px 12px 10px -10px rgba(0,0,0,.05);
position: absolute;
inset: 0;
margin: auto;
}
#number {
font-weight: 600;
color: #2E2D2E;
}
.bar svg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
circle {
fill: none;
stroke: url(#GradientColor);
stroke-width: 5px;
stroke-dasharray: 478;
stroke-dashoffset: 478;
animation: anim 2s linear forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 250;
}
}
<div class="progress__bars bars">
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Hits
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Hits
</div>
</div>
</div>
添加片段。有一些文物,但没关系。仍在片段中工作 啊有些描述要求好无聊XD
我在这里制作了一个可重复使用的进度指示器,其工作方式类似于反应钩子。
更新了它,所以它使用元素,而不是您使用的 SVG。
const bar1 = document.getElementById('bar1');
const bar2 = document.getElementById('bar2');
const bar3 = document.getElementById('bar3');
const bar4 = document.getElementById('bar4');
function progressBar(target, value = 0) {
const progress = document.createElement("progress");
progress.max = 100;
progress.value = 0;
target.appendChild(progress)
return [
() => value,
(add) => {
value += add;
if (value >= 100) {
progress.value = 100;
return;
}
progress.value = value;
},
];
}
const [progress1, addProgress1] = progressBar(bar1);
const [progress2, addProgress2] = progressBar(bar2);
const [progress3, addProgress3] = progressBar(bar3);
const [progress4, addProgress4] = progressBar(bar4);
setInterval(() => addProgress1(Math.ceil(Math.random() * 10)), 100)
setInterval(() => addProgress2(Math.ceil(Math.random() * 10)), 200)
setInterval(() => addProgress3(Math.ceil(Math.random() * 10)), 150)
setInterval(() => addProgress4(Math.ceil(Math.random() * 10)), 50)
<div class="bar">
<div class="outer">
<div class="inner">
<div id="bar1" />
<div id="bar2" />
<div id="bar3" />
<div id="bar4" />
</div>
</div>
<div class="bar__text">
Today's Visitors
</div>
</div>
为每个条形元素指定一个 class 名称和唯一 ID。然后访问 class 并简单地遍历所有 classes,设置值并对它们应用条件。
//get all the class
let item = document.querySelectorAll('.number');
let counter = 0;
for(var i=0; i < item.length; i++)
{
//set progress bar for each individual id property
var classId = item[i].id;
let number = document.getElementById(classId);
setInterval(() => {
if(counter == 65) {
clearInterval();
} else {
debugger;
counter += 1;
number.innerHTML = counter + "%";
}
}, 28);
}
<div class="progress__bars bars">
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number1">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number2">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Visitors
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number3">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Today's Hits
</div>
</div>
<div class="bar">
<div class="outer">
<div class="inner">
<div class="number" id="number4">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="52" cy="52" r="45" stroke-linecap="round" />
</svg>
<div class="bar__text">
Total Hits
</div>
</div>
</div>
</div>