<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
Пример использования прогресс-бара на платформе HTA (Microsoft Internet Explorer 5.5)
По мотивам http://webo.in/articles/habrahabr/13-cpu-intensive-javascript/
Специально для http://www.script-coding.com/
Calpy, 2008
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Process Bar</title>
<hta:application id="processbar" scroll="no" innerborder="no" icon="%windir%\notepad.exe" border="dialog"/>
<script>var w= {h: 200, w: 400}; window.resizeTo(w.w, w.h); window.moveTo((screen.width - w.w)/2, (screen.height - w.h)/2.5)</script>
<style>
<!--
body {background-color: buttonface; text-align: center;}
input {font: normal 11px/11px verdana, sans-serif; margin: 1em;}
#div_progress {position: relative; width: 300px; height: 20px; border: 0.5pt groove; background: white; margin-top: 50px; text-align: left;}
#div_progress div {background: #316AC5; width: 0; height: 100%;}
-->
</style>
<script>
<!--
// реализация "прогресса"
function t_progress(qtotal, qstep_time, qcall_back)
{
var astep_time= qstep_time || 40 // частота обновления, мс
var astart= new Date().getTime() // время начала работы
var astep= astart // время последнего обновления
var ais_run= true // флаг работы (при частом обновлении, после завершения работы процесса, могут оставаться необработанными запросы на обновление)
function stop() // завершение работы
{
alert("Total duration: " + ((astep - astart)/1000) + " seconds")
ais_run= false
if (qcall_back) qcall_back()
}
this.is_step= function() {return new Date().getTime() - astep > astep_time} // проверка на необходимость обновления (чтоб слишком часто не мигал, загружая систему)
this.set= function(qval) // установка значения (обновление)
{
astep= new Date().getTime()
document.getElementById("div_progress").firstChild.style.width= (100*qval/qtotal) + "%"
if (ais_run && qval >= qtotal) stop()
}
}
// провервка работы "прогресса"
function test()
{
// готовим данные какого-то процесса (здесь: сортировка массива)
var data= new Array(1000); for (var i= 0; i < data.length; ++i) data[i]= Math.floor(data.length*Math.random())
alert("Начальные данные:\n" + data)
var i= 0 // важно делать глобальной относительно функции процесса
// говорим, что надо делать после завершения процесса
function outro()
{
alert("Конечные данные:\n" + data)
}
// собственно сам процесс
var aprogress= new t_progress(data.length, 40, outro); // "прогресс": создаем
(function ()
{
while (i < data.length)
{
for (var j= data.length; j > i; j--) if (data[j] < data[j - 1]) {var v= data[j]; data[j]= data[j - 1]; data[j - 1]= v}
++i
if (aprogress.is_step()) {setTimeout(arguments.callee, 0); break} // "прогресс": проверка по времени, надо ли обновлять
}
aprogress.set(i) // "прогресс": установка значения (обновление)
})()
/* outro() // мы уже здесь, а процесс-то фактически еще идет... поэтому outro() вызывается как callback-функция */
}
//-->
</script>
</head>
<body>
<div id="div_progress"><div></div></div>
<input type="button" value="Старт" onclick="this.disabled= true; test()">
</body>
</html><HTML>
<META HTTP-EQUIV=Content-Type content='text/html;charset=windows-1251'>
<TITLE>PROGRESS_CLASS</TITLE>
<HEAD>
<HTA:APPLICATION
ID="PROGRESS_CLASS"
APPLICATIONNAME="PROGRESS_CLASS"
CAPTION="YES"
SYSMENU="YES"
MAXIMIZEBUTTON="NO"
MINIMIZEBUTTON="NO"
SINGLEINSTANCE="YES"
/>
<STYLE type=text/css>
P {border: 2px;border-style: groove;}
BODY {font-family: Lucida Console; font-size: 14px; color: white; cursor: hand;background-color: #0080ff;}
</STYLE>
</HEAD>
<BODY SCROLL="NO">
<CENTER><P>Щелкните по области окна чтобы запустить прогресс</P></CENTER>
<SCRIPT>
//---------------------------------------------------------------------------------
//Нет гарантий!Используете на свой страх и риск!
//---------------------------------------------------------------------------------
//Скрипт создает окно прогресс-бара(индикатора состояния),
//в родительском окне немодального диалога IE.
//---------------------------------------------------------------------------------
// Lang.:JavaScript
// Используется библиотека dynwrap.dll
// Используется библиотека AutoItX3.dll,v3.2.0.1
// ОС Win98/Me
//---------------------------------------------------------------------------------
//Область объявления общих переменных и констант
//---------------------------------------------------------------------------------
var WM_USER =eval('0x0400')
var SW_SHOWNORMAL =1
//---------------------------------------------------------------------------------
//Стили окна
var WS_BORDER =eval('0x00800000')
var WS_CHILD =eval('0x40000000')
var WS_VISIBLE =eval('0x10000000')
//---------------------------------------------------------------------------------
//Стили и сообщения для msctls_progressbar32
var PBS_SMOOTH =1
var PBS_VERTICAL =4
var PBM_SETRANGE =WM_USER + 1
var PBM_SETPOS =WM_USER + 2
var PBM_DELTAPOS =WM_USER + 3
var PBM_SETSTEP =WM_USER + 4
var PBM_STEPIT =WM_USER + 5
var PBM_SETRANGE32 =WM_USER + 5
var PBM_GETRANGE =WM_USER + 7
var PBM_GETPOS =WM_USER + 8
var PBM_SETBARCOLOR =WM_USER + 9
var PBM_SETBKCOLOR =eval('0x2000') + 1
//---------------------------------------------------------------------------------
//Параметры общего назначения
dlgTitle='Установка прогресса'
var wDlg
var pHwnd
var TIMESET_PRG
var PRG_STEP
//---------------------------------------------------------------------------------
//Вызовы API
var CreateWindowExA_CALL =new ActiveXObject("DynamicWrapper")
CreateWindowExA_CALL.Register ("USER32.DLL","CreateWindowExA","i=lsslllllllll","f=s","r=h")
//---------------------------------------------------------------------------------
var SendMessage_CALL =new ActiveXObject("DynamicWrapper")
SendMessage_CALL.Register ("USER32.DLL","SendMessage","i=huuu","f=s","r=l")
//---------------------------------------------------------------------------------
var ShowWindow_CALL =new ActiveXObject("DynamicWrapper")
ShowWindow_CALL.Register ("USER32.DLL","ShowWindow","i=ll","f=s","r=l")
//---------------------------------------------------------------------------------
var UpdateWindow_CALL =new ActiveXObject("DynamicWrapper")
UpdateWindow_CALL.Register ("USER32.DLL","UpdateWindow","i=l","f=s")
//---------------------------------------------------------------------------------
//Основные агрегатные объекты
var ax3 =new ActiveXObject('AutoItX3.Control')
//---------------------------------------------------------------------------------
runProgress() //Пуск
//---------------------------------------------------------------------------------
function moveProgress() //Изменение состояния прогресса
{
TIMESET_PRG=window.setTimeout('moveProgress()',100)
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
//Здесь может содержаться набор инструкций
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
SendMessage_CALL.SendMessage(pHwnd,PBM_SETPOS,PRG_STEP,0)
ax3.WinSetTitle (dlgTitle,'',dlgTitle+'-Выполнено '+PRG_STEP+'%')
PRG_STEP++
if (!ax3.WinExists(dlgTitle,'')) {window.moveTo(0,0);return window.clearTimeout(TIMESET_PRG)}
if (PRG_STEP>100) {wDlg.external.close();window.moveTo(0,0);return window.clearTimeout(TIMESET_PRG)}
}
//---------------------------------------------------------------------------------
function runProgress() //Набор стартовых инструкций
{
window.resizeTo (430,100)
window.moveTo (0,-200)
//----------------------------------------------------------
//Включение немодального диалога и изменение его параметров
wDlg=window.showModelessDialog("about: <HTML><TITLE>"+dlgTitle+"</TITLE><meta http-equiv=Content-Type content=text/html; charset=windows-1251><BODY BGCOLOR=#8000ff></BODY></HTML>")
with (wDlg.external)
{
dialogWidth =Math.floor(window.screen.width/16)-1
dialogHeight =80/16
dialogTop =Math.floor(window.screen.height/2)-160
dialogLeft =8
}
ax3.sleep(100)
//----------------------------------------------------------
//Создание окна прогресс-бара
hwnd= eval('0x'+ax3.WinGetHandle(dlgTitle,''))
pHwnd=CreateWindowExA_CALL.CreateWindowExA(0,
"msctls_progress32",
"",
WS_BORDER|WS_CHILD|WS_VISIBLE,
5,10,window.screen.width-40,25,
hwnd,0,0,0)
ax3.sleep(100)
//----------------------------------------------------------
//Установка параметров прогресс-бара
SendMessage_CALL.SendMessage(pHwnd,PBM_SETBKCOLOR ,0,eval('0xffffff'))
SendMessage_CALL.SendMessage(pHwnd,PBM_SETBARCOLOR ,0,eval('0xff8000'))
SendMessage_CALL.SendMessage(pHwnd,PBM_SETRANGE ,0,65536*100)
ax3.sleep(100)
//----------------------------------------------------------
//Это заставит окно обновится и перерисоваться
ShowWindow_CALL.ShowWindow(hwnd,SW_SHOWNORMAL)
UpdateWindow_CALL.UpdateWindow(hwnd)
ax3.sleep(100)
ax3.WinSetState(dlgTitle,'',ax3.SW_HIDE)
ax3.sleep(200)
ax3.WinSetState(dlgTitle,'',ax3.SW_SHOW)
//----------------------------------------------------------
PRG_STEP=0
return moveProgress()
}
//---------------------------------------------------------------------------------
//Обработчики событий
function document.onclick() {return runProgress()}
//---------------------------------------------------------------------------------
function document.oncontextmenu() {return false}
//---------------------------------------------------------------------------------
function window.onresize() {window.resizeTo(430,100)}
//---------------------------------------------------------------------------------
//Poltergeyst
</SCRIPT>
</BODY>
</HTML>Используются библиотеки dynwrap.dll и AutoItX3.dll.
Автор примера - Poltergeyst.
<html>
<head>
<title>Тест</title>
<meta http-equiv="MSThemeCompatible" content="Yes">
<meta name='resource-type' content='application'>
<meta name='author' content='Shotman0'>
<meta name='copyright' content='Copyright (c) 2007 by shotman'>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<script language="jscript" type="text/jscript">
function resizewin(w,h){
var top = (screen.width-w)/2;
var left = (screen.height-h)/2;
resizeTo(w,h);
moveTo(top,left);
}
resizewin(800,570);
function doNothing(){return true;}
//window.onerror = doNothing;
function Start(){
var d = document;
var line = d.getElementById('process_line');
var text = d.getElementById('text');
var line_p = line.firstChild;
var l = parseInt(document.getElementById('img').style.width.substring(0,(document.getElementById('img').style.width.length-1)));
d.getElementById('bar').style.visibility = 'visible';
Go();
}
function Go(){
var step = 1;
var l = parseInt(document.getElementById('img').style.width.substring(0,(document.getElementById('img').style.width.length-1)));
document.getElementById('img').style.width = (l+parseInt(step))+"%";
document.getElementById('text').innerHTML = (l+parseInt(step))+"%";
if(document.getElementById('img').style.width!='100%'){setTimeout('Go()',1)}
else{
animFade(document.getElementById('oppo'),0);
document.getElementById('oppo').display = "none";
}
}
function Reset(){
var d = document;
var line = d.getElementById('process_line');
var text = d.getElementById('text');
var line_p = line.firstChild;
var l = line_p.style.width.substring(0,(line_p.style.width.length-1));
d.getElementById('bar').style.visibility = 'hidden';
line_p.style.width = "0%";
text.innerHTML = "0%";
}
function animFade(ref, counter){
var f = ref.filters, done = (counter==100);
if(f){
for (i=ref.filters.alpha.opacity; i>0; i--){
setTimeout('document.getElementById("oppo").filters.alpha.opacity=parseInt(document.getElementById("oppo").filters.alpha.opacity-1);',i*2);
}
}
else ref.style.opacity = ref.style.MozOpacity = counter/100.1;
}
</script>
<style>
*{
padding:0px;
margin:0px;
font:11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
table{
border:0px;
border-collapse:collapse;
}
#process_line{
width:300px;
height:5px;
background-color:#FFFFFF;
border:#CCCCCC 1px solid;
text-align:left;
margin-top:3px;
}
#bar{
text-align:center;
padding-top:200px;
visibility:hidden;
}
#text{
font-size:10px;
color:#0000CC;
font:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<body bgcolor="#ffffff" onLoad="Start()">
<hta:application
id="processbar"
applicationName="processbar"
contextMenu="no"
icon="files/data/admin.ico"
scroll="no"
scrollFlat="yes"
selection="no"
singleInstance="yes"
version="1.0"
navigable="yes"
windowstate="normal"
/>
<div id="oppo" style="position:relative; z-index:99; height:150px; background-color:#FFFFFF; filter:Alpha(Opacity=100)"> <div>
<div id="bar">
<span id="text"> </span>
<div id="process_line"><img id="img" style="background-color:#000099; width:0%; height:3px; filter:Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=X, StartY=Y, FinishX=X, FinishY=Y) " alt="" /></div>
</div>
</body>
</html><META HTTP-EQUIV=Content-Type content='text/html;charset=windows-1251'>
<HTML>
<!--
----------------------------------------------------------------------------
Пример использования прогресс-бара на платформе HTA
----------------------------------------------------------------------------
Используемый ActiveX-Microsoft Windows Common Controls 5.0 (SP2) v1.3,
файл COMCTL32.OCX,зарегистрируйте эту библиотеку в реестре.
----------------------------------------------------------------------------
ОС Win98/Me
-->
<TITLE>Progress Bar</TITLE>
<HEAD>
<STYLE TYPE='text/css'>
BODY {background-color: #ff0000}
INPUT {border:1 solid black;width: 100;}
#comTw {border: 1px ;}
</STYLE>
<HTA:APPLICATION
ID='004512'
APPLICATIONNAME='msctls_progress32'
/>
</HEAD>
<BODY SCROLL='NO'>
<TABLE VALIGN=CENTER>
<TR>
<TD>
<OBJECT ID='comTw'></OBJECT>
</TD>
<TD>
<DT><INPUT TYPE=BUTTON ID='button1' VALUE='Пуск' onclick='initProgress();'>
<DT><INPUT TYPE=BUTTON ID='button2' VALUE='Сброс' onclick='resetBar();'>
</TD>
</TR>
<SCRIPT>
window.moveTo(0,0)
window.resizeTo(650,120)
//--------------------------------------------------------------------
comTw.classid='CLSID:0713E8D2-850A-101B-AFC0-4210102A8DA7'
//--------------------------------------------------------------------
comTw.style.height=20
comTw.style.width=500
comTw.BorderStyle=0
comTw.Appearance=1
comTw.Min=0
comTw.Max=100
//--------------------------------------------------------------------
var j=0
var stopFlag=1
//--------------------------------------------------------------------
function resetBar() //Сброс значения
{
stopFlag =1
j =0
comTw.Value=0
return
}
//--------------------------------------------------------------------
function initProgress() //Запуск прогресса
{
if (!stopFlag){return} //Предотвращение повторного запуска
stopFlag =0
j =0
setProgress()
return
}
//--------------------------------------------------------------------
function setProgress() //Установка значения progress bar
{
comTw.Value=j
j=j+1
if (j>100||stopFlag)
{
stopFlag=1;window.clearTimeout('setProgress()',20);return;
}
window.setTimeout('setProgress()',10)
return
}
//--------------------------------------------------------------------
</SCRIPT>
</BODY>
</HTML>