代码之家 › 专栏 › 技术社区 › Garrett Rose

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

html javascript

Garrett Rose · 技术社区 · 7 年前

我的登陆页面将有我所知道的每项技术的进度百分比。我唯一能解决的办法是,为每个函数生成两个值不同的函数,然后在体上调用它们。这看起来非常混乱。我怎么能把它做得更好?

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>

2 回复 | 直到 7 年前

undg 7 年前

你喜欢干代码,那是很好的习惯。在这里,您可以对代码进行一些小的修改:

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>

undg 7 年前

定义一个对象来跟踪你想要的。这是一个潜在的解决方案,你想要多少进度条,它的性能,因为只有一个间隔运行。我在当前未被使用的对象中添加了一个开始,但是如果你想让进程的开始是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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前