html进度条俩种实现方式

最新推荐文章于 2024-07-19 15:32:49 发布

从容的回答你

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量9.3k

点赞数

分类专栏： HTML 文章标签： html function button border null div

本文链接：https://blog.csdn.net/sunbobo163/article/details/8010132

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方式一：

<HTML>

<HEAD>
<script type="text/javascript">
var mytimer = null; var bar = 0;
function processbar() {
if (bar < 200) {
bar++;
document.getElementById("processbar").style.width = bar + "px";
mytimer = window.setTimeout("processbar()", 50);
}
}
function startbar() {
mytimer = window.setTimeout("processbar()", 50);
}
function pausebar() {
window.clearTimeout(mytimer);
}
</script>
</HEAD>

<BODY>
<div style="width: 200px; height: 10px; border: solid 1px #ccc; padding: 1px;">
<div id="processbar" style="background-color: #90EE90; width: 0px; height: 10px;"></div>
</div>
<input type="button" value="开始" οnclick="startbar();" />
<input type="button" value="暂停" οnclick="pausebar();" />
</BODY>

</HTML>

方式二：

<HTML>
<HEAD>
<script type="text/javascript">
var mytimer = null; var bar = 0;
function processbar() {
if (bar < 200) {
bar++; document.getElementById("processbar").style.width = bar + "px";
}
}
function startbar() {
mytimer = window.setInterval("processbar()", 50);
}
function pausebar() {
window.clearInterval(mytimer);
}

</script>
</HEAD>

<BODY>
<div style="width: 200px; height: 10px; border: solid 1px #ccc; padding: 1px;">
<div id="processbar" style="background-color: #90EE90; width: 0px; height: 10px;"></div>
</div>
<input type="button" value="开始" οnclick="startbar();" />
<input type="button" value="暂停" οnclick="pausebar();" />
</BODY>
</HTML>