test.htm
来自「漂亮的进度条,可以显示模拟window xp的进度条显示」· HTM 代码 · 共 230 行
HTM
230 行
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div id="id_div_report" style="overflow: visible; height: 0px; width: 100%; background-color:#f2f2f2;">
<table id="id_table_report" width="100%" border=0 cellpadding=2 cellspacing=0 class="sbody">
</table>
</div>
<script language=JavaScript>
var nProgressWidth = 350;
var g_ProgressStop = false; // 控制扫描进度停止
var g_RepairStop = false; // 控制修复进度停止
var g_ProgressWidth = 400; // 进度条的宽
var g_ProgressTop = 200; // 进度条的 TOP
var g_invProgressCtrl = null;
//创建进度条
function CreateProgress( strTitle, strSubTitle, strStatusName, strButtonText, nWidth, lpCallbackFunc )
{
var obj = document.all("id_waitting");
if ( obj )
return false;
if ( nWidth > 0 && nWidth < 500 )
{
g_ProgressWidth = nWidth;
}
if ( null == strTitle || "" == strTitle )
strTitle = "正在扫描，请稍候……";
if ( null == strStatusName || "" == strStatusName )
strStatusName = "正在扫描：";
var nDivTop = document.body.scrollTop + g_ProgressTop;
var nDivLeft = document.body.clientWidth / 2 - g_ProgressWidth / 2;
var str = "";
str += "<div id=\"id_waitting\" style=\"display:'none';position:absolute;top:" + nDivTop + ";left:" + nDivLeft + ";z-index:100;\">";
str += "<table width=" + parseInt(g_ProgressWidth) + " border=0 cellpadding=0 cellspacing=0 bgcolor=#83A8EC>";
str += " <tr valign=top>";
str += " <td><img src=\"corner2b.gif\" width=5 height=5></td>";
str += " <td align=right><img src=\"corner2c.gif\" width=5 height=5></td>";
str += " </tr>";
str += "</table>";
str += "<table bgcolor=\"#FFFFFF\" width=" + parseInt(g_ProgressWidth+3) + " border=0 cellspacing=0 cellpadding=2 style=\"border-right:3px solid #E4E4E4;border-bottom:3px solid #E4E4E4;\">";
str += " <tr>";
str += " <td bgcolor=\"#83A8EC\" class=sbold> 正在执行" + strSubTitle + "</td>";
str += " </tr>";
str += " <tr>";
str += " <td style=\"border:2px solid #83A8EC;padding:10px\">";
str += " <font class=stitle id=\"id_ProgressTitle\">" + strTitle + "</font><br><br>";
str += " <b><span class=sbody id=\"id_ProgressStatusName\">" + strStatusName + "</span></b><font class=sbody id=\"id_ProgressStatus\">...</font>";
str += " <table width=\"100%\" border=0 cellspacing=0 cellpadding=2 style=\"border:1px solid #CCCCCC;margin-top:10px;margin-bottom:10px\">";
str += " <tr>";
str += " <td><img id=\"id_Progress\" src=\"flow1a.gif\" width=0 height=12></td>";
str += " </tr>";
str += " </table>";
str += " <div align=center id=\"id_ProgressButtonP\" style=\"display:" + ( ( strButtonText && strButtonText.length>0 ) ? "''" : "'none'" ) + ">";
str += "<input type=\"button\" id=\"id_ProgressButton\" value=\" " + strButtonText + " \"></div>";
str += " </td>";
str += " </tr>";
str += "</table>";
str += "</div>";
document.write( str );
if ( lpCallbackFunc )
{
var objBtn = document.all("id_ProgressButton");
if ( objBtn )
{
objBtn.onclick = lpCallbackFunc;
}
}
}
//初始化进度条
function InitProgress( strTitle, strSubTitle, strStatusName, strButtonText, nWidth, nTop, lpCallbackFunc )
{
var objTable = document.all("id_waitting");
var objTitle = document.all("id_ProgressTitle");
var objSubTitle = document.all("id_ProgressSubTitle");
var objStatusName = document.all("id_ProgressStatusName");
var objButtonP = document.all("id_ProgressButtonP");
var objButton = document.all("id_ProgressButton");
if ( objTitle )
objTitle.innerHTML = strTitle;
if ( objSubTitle )
objSubTitle.innerHTML = strSubTitle;
if ( objStatusName )
objStatusName.innerHTML = strStatusName;
if ( objTable )
{
objTable.style.width = nWidth;
g_ProgressTop = nTop;
}
if ( objButtonP )
objButtonP.style.display = ( strButtonText.length > 0 ) ? "" : "none";
if ( objButton )
{
objButton.value = strButtonText;
if ( lpCallbackFunc )
{
objButton.onclick = lpCallbackFunc;
}
}
UpdateProgress( "", 0, g_ProgressWidth );
}
//更新进度条位置
function CorrectProgressPosition()
{
//return false;
if ( g_ProgressStop )
HideProgress();
var obj = document.all("id_waitting");
if ( obj )
{
obj.style.top = document.body.scrollTop + g_ProgressTop;
obj.style.left = document.body.clientWidth / 2 - g_ProgressWidth / 2;
}
}
//更新进度条
function UpdateProgress( sMsg, nPos, nMax )
{
if ( sMsg.length > 25 )
sMsg = sMsg.substr( 0, 25 ) + "...";
var objStatus = document.all("id_ProgressStatus");
if ( objStatus )
objStatus.innerHTML = sMsg;
var nPiece = g_ProgressWidth / ( nMax - 1 );
var nWidth = parseInt( nPiece * nPos );
if ( nWidth <= g_ProgressWidth && nWidth >= 0 )
{
var objProgress = document.all("id_Progress");
if ( objProgress )
{
if ( nWidth > nMax - 30 )
nWidth -= 30;
if ( nWidth > 0 )
objProgress.style.width = nWidth + "px";
}
}
}
function IsProgressShow()
{
var obj = document.all("id_waitting");
var bRet = false;
if ( obj )
{
if ( "" == obj.style.display )
bRet = true;
}
return bRet;
}
//显示进度条
function ShowProgress()
{
var obj = document.all("id_waitting");
var objTab = document.all("id_table_report");
if ( obj )
{
//SetAllCursor( "wait" );
obj.style.display = "";
//CorrectProgressPosition();
//g_invProgressCtrl = setInterval( "CorrectProgressPosition()", 100 );
}
}
//隐藏进度条
function HideProgress()
{
var obj = document.all("id_waitting");
if ( obj )
{
obj.style.display = "none";
clearInterval( g_invProgressCtrl );
}
}
function HideProgressEx( tmTimeout )
{
setTimeout( "HideProgress();", tmTimeout );
}
function CallbackProgressClick()
{
g_ProgressStop = true;
HideProgress();
}
</script>
<script language=JavaScript>
// 创建进度条控件
g_ProgressStop = false;
var g_nItemNum = 1;
var intpos = 1;
CreateProgress( "正在执行自动归档，请稍候……", "", "正在归档：", "", nProgressWidth, CallbackProgressClick );
UpdateProgress( "正在初始化...", 0, nProgressWidth );
ShowProgress();
InitList();
function InitList()
{
if(intpos <100){
var strFunc = "InitList();";
ShowPrograss();
intpos=intpos+1;
setTimeout( strFunc, 80 );
}
else
{
HideProgress();
}
}
function ShowPrograss()
{
UpdateProgress("正在处理第"+String(intpos)+"个凭证",intpos,100);
//HideProgressEx(g_nItemNum);
}
function DoProduce()
{
}
</script>
</body>
</html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?