Question

我在这里看到了一个完美的主题：How to increment value on progress-bar?

我想在我的网站项目中插入这样的进度条。

所以我按照this codepen。

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
    }
  }
}

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

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

我有一个问题，我不知道在动画之前和动画之后如何更改进度条的颜色。

我尝试了许多没有成功的事情......

请有任何忍者想帮助我吗？

此致

Answer 1

是否可以更改各种伪类，但这是特定于浏览器的。请参阅以下演示。请注意，必须为要应用的栏的更改设置progress元素本身的背景，至少在Chrome中是这样。不完全确定原因。

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
    }
  }
}

.progress {
  height: 40px;
  background: black;
}
.progress::-moz-progress-bar
{
    background: red;
}
.progress::-webkit-progress-bar
{
    background: transparent;
}
.progress::-webkit-progress-value
{
    background: red;
}

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

如何更改进度条（JS或CSS）的颜色

1 个答案: