当前位置:Gxlcms > JavaScript > JS进度条效果实现代码整理_javascript技巧

JS进度条效果实现代码整理_javascript技巧

时间:2021-07-01 10:21:17 帮助过:3人阅读

第一种方法:
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 += "
";
strLoading += "";
if(content != "")
{
strLoading += "";
strLoading += "";
strLoading += "";
strLoading += "";
}
strLoading += "";
strLoading += "";
strLoading += "
";
strLoading += "" + content + "";
strLoading += "
";
strLoading += "\"\"";
strLoading += "
";
strLoading += "
";

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

使用页:
代码如下:




Untitled Document