Question

我有一个进度条，应该从0％到100％填充，只需点击3秒钟。

<progress class="progress is-large is-info" max="100" value="10"></progress>
</br>
<button onclick="move()">Click Me</button>

由于没有 document.getElementByValue ，如何在循环中增加 value 属性才能完成？

Answer 1

将属性id添加到进度条，然后按documnet.getElementById访问该元素。 Alos添加了循环以显示进度。

Updated codepen.

检查以下示例：

＆＃13;

var progress = document.getElementById("progressbar");

function move() {
  var a = setInterval(function() {
    progress.value = progress.value + 1;

    if (progress.value == 100) {
      clearInterval(a);
    }
  }, 25);
}

＆＃13;

.progress.is-large {
  height: 40px;
}

＆＃13;

<progress id="progressbar" class="progress is-large is-info" max="100" value="10"></progress>
</br>
<button onclick="move()">Click Me</button>

＆＃13;

Answer 2

在进度条中添加id可以使用document.getElementById。之后，所有需要发生的事情都是设置一个间隔并增加progress.value。 Ids非常适合这种情况，因为它们是页面上特定元素的唯一标识符。

http://codepen.io/chasenyc/pen/grWrKR

function move() {
  var progress = document.getElementById("progressbar");
  var width = 1;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      progress.value = width
    }
  }
}

Answer 3

这是一种与原始尝试不同的方法，但与循环+ 1相比有一些优势：

JS仅用于触发动画，但动画完全由浏览器处理 - 这会产生非常流畅的动画，同时需要更少的处理能力（尽管最后一点可能与大多数设备无关，我仍然喜欢它这样）
它几乎不需要代码，并且包含了你可能想要的风格 -
以非常灵活的方式缩放到它的父级的宽度属性。
如果您没有寻找线性进展，可以通过交换单个词轻松使用不同的timing function

缺点是它需要CSS3。

#progress-bar-container {
  background-color: #ddd;
  width: 300px;
}
#progress-bar {
  background-color: #08f;
  height: 20px;
  transition: width 3s linear;
  width: 0%;
}
#progress-bar.full {
  width: 100%;
}

<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>
<button onclick="document.getElementById('progress-bar').className += ' full'">Click Me</button>

如何增加进度条的值？

3 个答案: