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％开始加载。
如果您希望进度条在单击之前从其他数字开始，则这三行必须在功能“ 移动”之外：

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

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

进度栏宽度不会动态更改

1 个答案: