從onclick更改爲onload

我有這個進度欄，一旦點擊加載。如何在頁面加載時將其從onclick更改爲加載？從onclick更改爲onload

<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>

來源

2016-10-12 xTRIFAC70Rx

你可以做這樣的事情。所以只要onload事件發生，你的函數就會被執行。 P.S. ： - 將其always a better approach to keep your javascript code seperate添加到html（即不直接在html標籤中使用onload，onclick等屬性，而是將事件綁定到JavaScript代碼中所需的元素）。這有助於separating the business logic中的代碼，並且每當您需要查找或更改它時，如果您正在處理大型代碼，則其comparatively easier to find。

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 + '%'; 
 
    } 
 
    } 
 
}

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

來源

2016-10-12 11:37:19

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

或

如果你希望保持所有的JavaScript，你也可以用肢體使用document.addEventListener('DOMContentLoaded', funciton())

例子。 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>

來源

2016-10-12 11:32:44 Keith

從onclick更改爲onload

回答

相關問題