JS实现进度条效果

最新推荐文章于 2023-11-09 11:24:12 发布

w36680130

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量667

点赞数

文章标签：进度条效果实现

原文链接：https://www.cnblogs.com/qiren5761/archive/2007/06/18/788051.html

版权

本文转载自： 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>

w36680130

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 loadingW...
复制链接

扫一扫