ホームページ > 記事 > ウェブフロントエンド > プログレスバーを実装するjsメソッド_javascriptスキル
プログレスバーを実装するjsメソッド_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:14:171372ブラウズ
この記事の例では、js でプログレスバーを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
1.setTimeout と clearTimeout
<html>
<head>
<title>进度条</title>
<style type="text/css">
.container{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#bar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function run(){
var bar = document.getElementById("bar");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) + 1 + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",100);
}
window.onload = function(){
run();
}
</script>
</head>
<body>
<div class="container">
<div id="bar" style="width:0%;"></div>
</div>
<span id="total"></span>
</body>
</html>
レンダリング:
2.setInterval と clearInterval
<html>
<head>
<title>进度条</title>
<style type="text/css">
.processcontainer{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#processbar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function setProcess(){
var processbar = document.getElementById("processbar");
processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
processbar.innerHTML = processbar.style.width;
if(processbar.style.width == "100%"){
window.clearInterval(bartimer);
}
}
var bartimer = window.setInterval(function(){setProcess();},100);
window.onload = function(){
bartimer;
}
</script>
</head>
<body>
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</body>
</html>
レンダリング:
3.setTimeout と setInterval の違い
setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用します。 setInterval() メソッドは、clearInterval() が呼び出されるか、ウィンドウが閉じられるか、またはコード自体が setTimeout() を再度呼び出すまで、関数を呼び出し続けます。
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。