进度条js

最新推荐文章于 2024-08-08 14:18:17 发布

tianzizi123

最新推荐文章于 2024-08-08 14:18:17 发布

阅读量475

点赞数 1

文章标签： div button function html table upload

本文链接：https://blog.csdn.net/tianzizi123/article/details/6523965

版权

loading.js

//频率
var frequency = Math.floor(Math.random()*10+1);
//步长
var step = 3;
//流量
var flow = 2;
//背景颜色
var loadingBgcolor = "#ffffff";
//宽度
var loadingWidth = 250;
var time;

var index = 0;
var index1 = 0;
/*
*参数说明:
*content：显示内容，可以为空；
*imageURL：将引用JS文件的路径设置即可；
*left：进度条显示位置left
*top：进度条显示位置top
*/
function Loading(content, imageURL, left, top)
{
imageURL = imageURL + "Loading.gif";

LoadTable(content, imageURL, left, top);
showimage.style.display="";
time = window.setInterval("RefAct();", frequency);

}

function RefAct()
{
imgAct.width += step;
index += frequency;
index1 += flow;
document.getElementById("loading_div1").innerHTML = "<br/>上传时间:" + index + "ms " + "上传流量:" + index1 + "kb ";

if(imgAct.width > loadingWidth-4)
{
imgAct.width = 0;
index = 0;
index1 = 0;
window.clearInterval(time);
frequency = Math.floor(Math.random()*10+1);
}
}

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 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;
}

html部分

<!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="loading.js" type="text/javascript"></script>

</head>

<body>
<div id="main" style="padding-left:400px"><font size=4 face="Courier New, Courier, mono"><strong>  模拟图片上传页面</strong></font><br/><br/>
<img src="2.jpg" height="200" width="200"/> <br/><br/>
<input type="button" name="Button" value="upload" οnclick="Loading('模拟图片上传页面', '', 400, 340)">

</div>
<div id="loading_div" ></div>

tianzizi123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条js

loading.js//频率var frequency = Math.floor(Math.random()*10+1);//步长 var step = 3;//流量var flow = 2;//背景颜色var loadingBgcolor = "#ffffff";//宽度var loadingWidth = 250;var time;var index = 0;var index1
复制链接

扫一扫