js实现进度条加载

最新推荐文章于 2025-05-21 14:55:16 发布

悲鸣草种子

最新推荐文章于 2025-05-21 14:55:16 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Silence4444silence/article/details/54407932

本文介绍了如何使用JavaScript创建一个进度条加载效果。通过展示HTML结构和对应的JS代码，逐步解释了进度条从隐藏到显示，以及宽度逐渐增加直至完成的过程。在提交操作后调用loading()函数来启动进度条加载动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用于显示进度条的table

<table id="t1" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
<tr>
<td><br><br>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
<tr bgcolor="#F7F7F6">
<td width="20%" height="100" valign="middle">
<table align='center' width='500'>
<tr>
<td colspan='2' align='center' ><font size="2">
正在进行保存，用时较长，请稍后...
</font>
</td>
</tr>
<tr>
<td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
<td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

2.js:

/*********************进度条加载*************************************/
var len = 500 ;
var add = 0 ;
function openContenFrame(){
var td1 = document.getElementById('tdOne') ;
var td2 = document.getElementById('tdTwo') ;
add = add+20 ;
td1.width = add ;
if(len - add <= 0){
td2.width = 1 ;
}else{
td2.width = len - add ;
}
if(add<=len) {
;
}else{
td1.width = 1 ;
td2.width = 500 ;
add = 0 ;
}
setTimeout('openContenFrame()',100) ;
}
function loading(){
document.getElementById("t1").style.display="";//进度条显示
document.getElementById("t2").style.display="none";//需要隐藏的
document.getElementById("t3").style.display="none";//需要隐藏的
openContenFrame();
}