Javascript loading bar

Javascript loading bar

本文关键字：bar loading Javascript      更新时间：2023-09-26

我将如何制作加载栏，我也希望它是"可堆叠的"，例如在同一页面上有 2 个，并在完成后让第一个触发第二个，然后第二个重定向到 100% 的 URL，这对你们来说可能是基本的，也可能不是基本的，但对我来说真的很难。我已经有一个过时的 JavaScript 版本，但是当我添加第二个并且不知道如何让它触发第二个时，它就消失了。如果您想尝试编辑我拥有的那个，那么它会触发第二个并且可以堆叠，那么就这么说吧，但请注意它已经过时了，我知道，我正在使用它，因为它的配置和设置非常简单。

这是到目前为止的相关代码： 

var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
  var output = '[';
  for (var i = 0; i < imgCtb; i++) {
    output += i > currentAdb ? '&nbsp;' : '/';
  }
  output += ']';
  document.getElementById('adLinkb').innerHTML = output;
  ++currentAdb;
  if(currentAdb == imgCtb) {
    window.clearInterval(myInterval);
  }
}
var myInterval = window.setInterval(cycleb, 500);
#adLinkb {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}
<div id="adLinkb"></div>

好的，让我们扩展我在上一个问题中给你的代码，将其分组为函数并引入回调：

function buildBar(id, callback) {
  var currentAdb = 0;
  var imgCtb = 25;
  function cycleb() {
    var output = '[';
    for (var i = 0; i < imgCtb; i++) {
      output += i > currentAdb ? '&nbsp;' : '/';
    }
    output += ']';
    document.getElementById(id).innerHTML = output;
    ++currentAdb;
    if (currentAdb == imgCtb) {
      window.clearInterval(myInterval);
      if (typeof callback == 'function') {
        callback();
      }
    }
  }
  var myInterval = window.setInterval(cycleb, 500);
}
function callback1() {
  buildBar('adLinkb2', callback2);
}
function callback2() {
  //window.location... stuff here
  alert('redirect should go here');
}
buildBar('adLinkb', callback1);
#adLinkb,
#adLinkb2 {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}
<div id="adLinkb"></div>
<div id="adLinkb2"></div>

相关文章：