javascript - 进度条宽度不动态变化

Question

我正在尝试实现一个类似这样的进度条 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3 通过传递宽度大小参数。但宽度尺寸并没有增加。我的代码有什么问题？

component.ts

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

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }

    onMessage() {
      this.ws.onmessage = (message) => {
      console.log("Got websocket message " + message.data);
        // Decode the JSON
      var data = JSON.parse(message.data);

        // Handle errors
      if (data.error) {
       alert(data.error);
       return;
       }
       let percentage = data.percent;
       $('#myBar1').text(percentage + "%");
       console.log("percentage is:: " + percentage);
       this.move(percentage);
       if (data.action == "complete") {
       console.log("uploaded successfully...")
       }
      };
     }

Answer 1

由于 W3 中代码的执行方式，宽度仅在按下按钮后才应用。您应该注意到，如果您的宽度设置为 50 之类的值，那么当您按下按钮时，栏将立即从 50% 开始加载。
如果您希望进度条在单击之前从不同的数字开始，则这 3 行需要位于函数“move”之外:

var width = 50;
var elem = document.getElementById("myBar");   
elem.style.width = width + '%'; 

您可以将其放入另一个函数中，并根据其中的输入将宽度设置为变量。