Question

我有一个进度栏，点击后加载一次。如何在页面加载时将其从onclick更改为加载？

<div id="myProgress">
  <div id="myBar">
    <div id="label">10%</div>
  </div>
</div>

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

Answer 1

你可以把它放在身上，onload事件..

或

如果您想保留所有javascript内容，也可以使用document.addEventListener('DOMContentLoaded', funciton())

使用body.onload

的示例

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}

<body onload="move()">
  <div id="myProgress">
    <div id="myBar">
      <div id="label">10%</div>
    </div>
  </div>
</body>

Answer 2

你可以这样做。因此，只要发生onload事件，您的函数就会被执行。附：： - 它对html的always a better approach to keep your javascript code seperate（即不直接在html标签中使用onload，onclick等属性，而是将事件绑定到javascript代码中的必需元素）。这有助于separating the business logic代码，无论何时您需要找到它或更改它，如果您正在处理大型代码，它都会comparatively easier to find。

＆＃13;

window.onload = function(){
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}

＆＃13;

<body>
  <div id="myProgress">
    <div id="myBar">
      <div id="label">10%</div>
    </div>
  </div>
</body>

＆＃13;

将功能从onclick更改为onload

2 个答案: