onclickからonloadへの変更機能

クリックするとこのプログレスバーがロードされます。ページが読み込まれたら、それをonclickからloadに変更するにはどうすればよいですか？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.P. ： - その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

あなたは、物事にすべての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への変更機能

答えて

関連する問題