JavaScript进度条不起作用

时间:2017-07-16 04:48:09

标签: javascript jquery html css css3

这段代码不适合我只做一件工作,当我从html删除脚本标签到外部文件不起作用我需要帮助所有记录工作并将其移动到外部文件....... ..............................

window.onload = function() {
  var elem = document.getElementById("myBar");
  var valuee = document.getElementById("bar").value;
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0%</div>
  <input type="hidden" id="bar" name="bar" value="60" />
</div>

<div id="myProgress">
  <div id="myBar">0%</div>
  <input type="hidden" id="bar" name="bar" value="60" />
</div>

<br>
<button onclick="move()">Click Me</button>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
gnome-screensaver-command -q | grep -c " active"
&#13;
window.onload = function() {
  var elem = document.getElementById("myBar");
  var valuee = document.getElementById("bar").value;
  var width = 0;
  var id = setInterval(frame, 10);

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

  var elem_1 = document.getElementById("myBar_1");
  var valuee_1 = document.getElementById("bar_1").value;
  var width_1 = 0;
  var id_1 = setInterval(frame_1, 10);

  function frame_1() {
    if (width_1 >= 100) {
      clearInterval(id_1);
    } else {
      width_1++;
      elem_1.style.width = width_1 + '%';
      elem_1.innerHTML = width_1 * 1 + '%';
    }
  }
}
&#13;
#myProgress,
#myProgress_1 {
  width: 100%;
  background-color: #ddd;
}

#myBar,
#myBar_1 {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
&#13;
&#13;
&#13;