Question

我寻找与我的问题有关的类似问题，但无法解决问题。我在HTML5中做了一个进度条的例子，我尝试了IE和Chrome，但GO按钮没有设置进度条。

以下是代码：

    <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5 Progress Bar</title>
<script type="text/javascript">
    function go();
    {
        var inc = 0;
        var doIt = setInterval(updateProgress,50);
        function updateProgress() 
        {
        inc++;
            if (inc > 100) 
            {
            document.getElementById("output").innerHTML = "Done!";
            } else 
            {
            document.getElementById("output").innerHTML = inc+ "%";
            document.getElementById("progress1").value = inc;
            }
        }
    }

    </script>

    </head>
    <body>
    <progress id = "progress1" value="0" min="0" max="100" style="width:300px;"> </progress> <br>
    <span id="output"> </span> <br> <br>
    <button id= "go" onclick="go()"> GO </button>
    </body>
    </html>

Answer 1

那是因为在你的大括号开始之前你的go函数后面有一个分号;。尝试运行下面的代码段。

＆＃13;

function go() {
  var inc = 0;
  var doIt = setInterval(updateProgress, 50);

  function updateProgress() {
    inc++;
    if (inc > 100) {
      document.getElementById("output").innerHTML = "Done!";
    } else {
      document.getElementById("output").innerHTML = inc + "%";
      document.getElementById("progress1").value = inc;
    }
  }
}

＆＃13;

<progress id="progress1" value="0" min="0" max="100" style="width:300px;"> </progress> <br>
<span id="output"> </span> <br> <br>
<button id="go" onclick="go()"> GO </button>

＆＃13;

Answer 2

问题是您在;之后有一个分号go();，它看起来应该是

function go() 
{
    var inc = 0;
    var doIt = setInterval(updateProgress,50);
    function updateProgress() 
    {
    inc++;
        if (inc > 100) 
        {
        document.getElementById("output").innerHTML = "Done!";
        } else 
        {
        document.getElementById("output").innerHTML = inc+ "%";
        document.getElementById("progress1").value = inc;
        }
    }
}

HTML5进度条无法正常工作

2 个答案: