JS实现进度条效果

本文转载自: https://www.cnblogs.com/qiren5761/archive/2007/06/18/788051.html 作者:qiren5761 转载请注明该声明。

Loading.js
//频率
var frequency = 50;
//步长  
var step = 3;
//背景颜色
var loadingBgcolor = "#ffffff";
//宽度
var loadingWidth = 354;

/*
*参数说明:
*content:显示内容,可以为空;
*imageURL:将引用JS文件的路径设置即可;
*left:进度条显示位置left
*top:进度条显示位置top
*/
function Loading(content,  imageURL, left, top)

 imageURL = imageURL + "Loading.jpg";
  
 LoadTable(content, imageURL, left, top);
 showimage.style.display="";
 window.setInterval("RefAct();", frequency);
}  

function RefAct()
{  
 imgAct.width += step;
 if(imgAct.width > loadingWidth-4)
 {
  imgAct.width = 0;
 }
}

function LoadTable(content, imageURL, left, top)
{
 var strLoading;
 strLoading = ""; 
 strLoading += "<div id=\"showimage\" style=\"DISPLAY:none;Z-INDEX:100;LEFT:" + left+ "px;POSITION:absolute;TOP:" + top+ "px;\" align=\"center\">";
  strLoading += "<TABLE id=\"Table1\" cellSpacing=\"0\" cellPadding=\"0\" width=\"" + loadingWidth + "\" border=\"0\" bgcolor=\"" + loadingBgcolor+ "\">";
 if(content != "")
 {  
   strLoading += "<tr>";
    strLoading += "<td align=\"center\">";
     strLoading += "<font size=\"4\" face=\"Courier New, Courier, mono\"><strong>" + content + "</strong></font>";
    strLoading += "</td>";
   strLoading += "</tr>";
   strLoading += "<TR>";
 }
    strLoading += "<TD class=\"Loading\" height=\"8\">";
     strLoading += "<IMG id=\"imgAct\" height=\"8\" alt=\"\" src=\"" + imageURL + "\" width=\"0\">";
    strLoading += "</TD>";
   strLoading += "</TR>";
  strLoading += "</TABLE>";
 strLoading += "</div>";

 document.getElementById("loading_div").innerHTML = strLoading;


使用页:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="LoadingJS/Loading.js" type="text/javascript"></script>

</head>

<body>
<input type="button" name="Button" value="Button" οnclick="Loading('显示标签内容', 'LoadingJS/', 20, 100)">
<div id="loading_div" ></div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值