Rumah > hujung hadapan web > tutorial js > JS 进度条效果实现代码整理_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 18:06:28
asal
1143 orang telah melayarinya

第一种方法:
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






Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan