如何在 1 个函数调用中返回进度条的两个百分比值?

我的着陆页将包含我知道的每种技术的进度百分比。我似乎能弄清楚的唯一解决方案是为每个函数制作两个具有不同值的函数，然后在 body onload 中调用它们。这似乎非常混乱。我怎样才能做得更好？

function webMove() {
var elem = document.getElementById("myBar");
var width = 0;
var width2 = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
function gitHubMove() {
var elem = document.getElementById("myBar2");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}

<body onload="webMove(),gitHubMove()">
<div id="container">
<div id="myProgress">
<div id="myBar">
</div>
</div>
</div>
<div id="container2">
<div id="myProgress2">
<div id="myBar2">
</div>
</div>
</div>
</body>

只需定义一个对象来跟踪您想要的内容。这是您想要的任意数量的进度条的潜在解决方案，并且其性能很高，因为只有一个间隔运行。我在当前未使用的对象中添加了一个开始，但如果您想让进度的开始不是 0，这就是您可以做到的

function progress() {
keys = ['web', 'github']
var meta = {
web: {
done: false,
current: 0,
max: 50,
start: 0,
elem: document.getElementById("myBar")
},
github: {
done: false,
current: 0,
max: 100,
start: 0,
elem: document.getElementById("myBar2")
}
}
var id = setInterval(frame, 10);

function frame() {
var complete = true
keys.forEach( function(key) {
var obj = meta[key]
if (!obj.done) {
complete = false
}
if (obj.current >= obj.max) {
obj.done = true
return
}

obj.current++
obj.elem.style.width = obj.current + '%';
obj.elem.innerHTML = obj.current * 1 + '%';
})
if (complete) {
clearInterval(id)
}
}
}
progress()

<div id="myBar"></div>
<div id="myBar2"></div>

你喜欢枯燥的代码，这是非常好的习惯。在那里，您可以对代码进行少量修改：

function progressBar(elementId, progressPercent){
var elem = document.getElementById(elementId);
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= progressPercent) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
progressBar("webMove", 80)
progressBar("gitHubMove", 60)

<div id="container">
<div id="myProgress">
<div id="webMove">
</div>
</div>
</div>
<div id="container2">
<div id="myProgress2">
<div id="gitHubMove">
</div>
</div>
</div>

相关内容

最新更新

热门标签：