javascript - 调试XP栏 | widthGenerator

我一直在做这段代码，但是我似乎无法像我想要的那样使它工作。我希望出现提示，询问您处理主题多长时间，然后在进度栏上指定正确的宽度。

编辑：widthGenerator创建弹出窗口，但是我似乎无法将widthGenerator（）中的变量width转移为Move（）作为Move的宽度。

这是我的代码：

<body class="w3-container">
<div class="w3-progress-container w3-round-xlarge">
    <div id="myBar" class="w3-progressbar w3-round-xlarge" style="width:1%"></div>
</div>

<button class="w3-btn" onclick="move()">Click Me</button>

<script>
function widthGenerator() {
var question = prompt("Enter number of hours worked:", "Enter here");
  if (isNaN(question) == false) {
      var width = (question * 2.33463);
      break;
  } else if (isNaN(question) == true) {
    question = prompt("That is not a number; Enter the number of hours worked:", "Enter here");
    break;
  };
}
function move() {
    var elem = document.getElementById("myBar");
    var id = setInterval(frame, 1);
var width = widthGenerator()
function frame() {
    if (width >= widthGenerator()) {
        clearInterval(id);
    } else {
        width += 0.1;
        elem.style.width = width + '%';
    }
  }
}
</script>

最佳答案

在widthGenerator（）函数中需要一个return语句：

function widthGenerator() {

    var question = prompt("Enter number of hours worked:", "Enter here");
    if (!isNaN(Number(question))) {
        var width = (question * 2.33463);
    } else {
        question = prompt("That is not a number; Enter the number of hours worked:", "Enter here");
    }

    return width;
}

我不想过多地修改您的代码，但请注意，用户有可能永远不会根据widthGenerator（）的编写方式输入数字。

关于javascript - 调试XP栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39499324/