JavaScript DHTML/Ajax Layer/Timer Event
Start and stop a timer: Simulates a stop watch and displays the elapsed time
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JsLib 1.3 - Exemple - chrono.js</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="Etienne CHEVILLARD">
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* chrono.js
* Role : simule un chronometre et affiche le temps ecoule
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
* Version : 1.3
* Creation : 25/04/2001
* Mise a jour : 23/02/2005
*/
// --- Variables globales ---
// variables pour la gestion du chronometre
var chrono_demarre=false;
var chrono_ecoule=0;
var chrono_depart=0;
var chrono_dernier=0;
// variables pour la mise a jour dynamique
var chrono_champ;
var chrono_timeout;
// --- Fonctions ---
// indique si le chronometre est demarre ou non
function actifChrono() {
return (chrono_demarre);
} // fin actifChrono()
// arrete le chronometre
function arreterChrono() {
if (chrono_demarre) {
chrono_dernier=(new Date()).getTime();
chrono_ecoule+=(chrono_dernier-chrono_depart);
chrono_demarre=false;
}
return true;
} // fin arreterChrono()
// active la mise a jour dynamique du temps mesure pour le champ specifie
function chargerChronoDyna(champ) {
if (champ)
chrono_champ=eval(champ);
chrono_champ.value=tempsChrono();
chrono_timeout=window.setTimeout("chargerChronoDyna()", 10);
return true;
} // fin chargerChronoDyna(champ)
// desactive la mise a jour dynamique du temps mesure precedemment activee
function dechargerChronoDyna() {
window.clearTimeout(chrono_timeout);
return true;
} // fin dechargerChronoDyna()
// demarre le chronometre
function demarrerChrono() {
if (!chrono_demarre) {
chrono_depart=(new Date()).getTime();
chrono_demarre=true;
}
return true;
} // fin demarrerChrono()
// remet a zero le chronometre si celui-ci est arrete
function RAZChrono() {
if (!chrono_demarre) {
chrono_ecoule=0;
chrono_depart=0;
chrono_dernier=0;
}
return true;
} // fin RAZChrono()
// retourne le temps mesure par le chronometre au format HH:MM:SS:CC
function tempsChrono() {
var cnow;
if (chrono_demarre) {
chrono_dernier=(new Date()).getTime();
cnow=new Date(chrono_ecoule+(chrono_dernier-chrono_depart));
} else {
cnow=new Date(chrono_ecoule);
}
var ch=parseInt(cnow.getHours()) - 1;
var cm=cnow.getMinutes();
var cs=cnow.getSeconds();
var cc=parseInt(cnow.getMilliseconds()/10);
if (cc<10) cc="0"+cc;
if (cs<10) cs="0"+cs;
if (cm<10) cm="0"+cm;
return (ch+":"+cm+":"+cs+":"+cc);
} // fin tempsChrono()
</SCRIPT>
</HEAD>
<BODY onLoad="chargerChronoDyna("document.f.t")"
onUnload="dechargerChronoDyna()">
<H1>JsLib 1.3</H1>
<HR>
<H2>Exemple - chrono.js</H2>
<NOSCRIPT>
<P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne
pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
configuration dans les préférences/options de votre navigateur.</I>
<HR>
</NOSCRIPT>
<P>Chronomètre avec mise à jour dynamique :
<FORM ACTION="GET" NAME="f">
<INPUT NAME="t" TYPE=TEXT VALUE="0:00:00:00" SIZE=12>
<INPUT TYPE=BUTTON VALUE="Démarrer / Arrêter"
onClick="if (actifChrono()) arreterChrono(); else demarrerChrono();">
<INPUT TYPE=BUTTON VALUE="Remettre à zéro" onClick="RAZChrono();">
</FORM>
</BODY>
</HTML>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/JsLib13.zip">JsLib13.zip( 311 k)</a>
Timer event by DynAPI
<html>
<head>
<title>DynAPI Examples - TimerX Class</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.library");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.fx.TimerX");
</script>
<script language="Javascript">
myLayer=new DynLayer(null,135,100,130,50,"#00A000")
myClock=new DynLayer(null,270,100,200,50,"#0000A0")
myLayer.addEventListener({
ontimer:function(e){
var o=e.getSource()
var src="<font size=2 face=arial color=#ffffff> Tick @ 200ms <br> Tick count="+o.getTickCount()+"</font>"
o.setHTML(src)
}
})
myClock.addEventListener({
ontimer:function(e){
var o=e.getSource()
var src="<font size=2 face=arial color=#ffffff> "+new Date()+"</font>"
o.setHTML(src)
}
})
myLayer.startTimer(200)
myClock.startTimer(1000)
dynapi.document.addChild(myLayer)
dynapi.document.addChild(myClock)
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Use Timer event to trigger ViewPane repaint
<html>
<head>
<title>DynAPI Examples - ViewPane</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("ViewPane");
</script>
<script language="JavaScript" type="text/javascript">
var html_content = new Array();
html_content[0] = "<table border="1" width="400" height="400">\n" +
" <tr>\n" +
" <td valign="top">\n" +
" <h1>Content #1</h1>\n" +
" This is test messaage<br>\n" +
" <font face="arial" size="6"><b>DynAPI\n" +
" ViewPane</b></font>\n" +
" Sub Menu\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" </td>\n" +
" </tr>\n" +
"</table>\n";
html_content[1] = "<table border="1" width="100" height="100">\n" +
" <tr>\n" +
" <td valign="top">\n" +
" <h1>Content #2</h1>\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" </td>\n" +
" </tr>\n" +
"</table>";
html_content[2] = "<table border="1" width="300" height="100">\n" +
" <tr>\n" +
" <td valign="top">\n" +
" <h1>Content #3</h1>\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" </td>\n" +
" </tr>\n" +
"</table>";
html_content[3] = "<table border="1" width="100" height="300">\n" +
" <tr>\n" +
" <td valign="top">\n" +
" <h1>Content #4</h1>\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" </td>\n" +
" </tr>\n" +
"</table>";
html_content[4] = "<table border="1" width="200" height="200">\n" +
" <tr>\n" +
" <td valign="top">\n" +
" <h1>Content #5</h1>\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" Some Text Some Text Some Text Some Text\n" +
" </td>\n" +
" </tr>\n" +
"</table>";
var vp = new Array();
vp[0] = new ViewPane(null,200,25,200,160);
vp[1] = new ViewPane(null,450,25,200,160);
vp[2] = new ViewPane(null,200,225,200,160);
vp[3] = new ViewPane(null,450,225,200,160);
vp[0].setContent(new DynLayer("Test Layer1",10,10,250,250,"yellow"));
vp[1].setContent(new DynLayer("Test Layer2",10,10,250,250,"yellow"));
vp[2].setContent(new DynLayer("Test Layer3",10,10,250,250,"yellow"));
vp[3].setContent(new DynLayer("Test Layer4",10,10,250,250,"yellow"));
changeContent(0,0);
changeContent(1,0);
changeContent(2,0);
changeContent(3,0);
dynapi.document.addChild(vp[0]);
dynapi.document.addChild(vp[1]);
dynapi.document.addChild(vp[2]);
dynapi.document.addChild(vp[3]);
function changeContent (vp_inx,html_inx)
{
vp[vp_inx||0].setContent( html_content[html_inx||0] );
};
var rand_timer = 0;
var rand_interval = 1000;
var rand_n = 1;
var rand_n_rand = false;
function rand_start (n)
{
rand_n = n || rand_n;
if ( rand_n_rand == true )
{
rand_n = getRandomInt( 0, vp.length - 1 );
}
switch ( rand_n )
{
case 1:
var vp_inx = getRandomInt( 0, vp.length - 1 );
var html_inx = getRandomInt( 0, html_content.length - 1 );
changeContent( vp_inx, html_inx );
break;
case 2:
var vp_inxs = new Array();
var html_inxs = new Array();
while ( vp_inxs.length < rand_n )
{
var vp_inx = getRandomInt( 0, vp.length - 1 );
var found = false;
for ( var i = 0; i < vp_inxs.length; i++ )
{
if ( vp_inxs[i] == vp_inx )
{
found = true;
break;
}
}
if ( ! found )
{
vp_inxs[vp_inxs.length] = vp_inx;
html_inxs[html_inxs.length] = getRandomInt( 0, html_content.length - 1 );
}
continue;
}
for ( var i = 0; i < vp_inxs.length; i++ )
{
changeContent( vp_inxs[i], html_inxs[i] );
}
break;
case 3:
var vp_inx = getRandomInt( 0, vp.length - 1 );
for ( var i = 0; i < vp.length; i++ )
{
var html_inx = getRandomInt( 0, html_content.length - 1 );
if ( i != vp_inx )
{
changeContent( i, html_inx );
}
}
break;
case 4:
for ( var i = 0; i < vp.length; i++ )
{
var html_inx = getRandomInt( 0, html_content.length - 1 );
changeContent( i, html_inx );
}
break;
default:
rand_stop();
}
rand_timer = window.setTimeout( "rand_start()", rand_interval );
}
function rand_stop ()
{
window.clearTimeout( rand_timer );
rand_timer = 0;
}
function rand_reset ( )
{
rand_n = 1;
rand_interval = 1000;
rand_n_rand = false;
if ( rand_timer == 0 )
{
rand_start();
}
}
function set_rand_interval ( n )
{
rand_interval = n || 1000;
if ( rand_timer == 0 )
{
rand_start();
}
}
function rand_mult (n)
{
rand_n = n || 1;
if ( rand_timer == 0 )
{
rand_start();
}
}
function set_rand_n_rand ( b )
{
rand_n_rand = b;
if ( rand_timer == 0 )
{
rand_start();
}
}
function getRandomInt ( min, max )
{
return Math.floor( min + Math.random() * ( max - min + 1 ) );
}
</script>
</head>
<body>
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0">
<TR>
<TD> </TD>
<TD ALIGN="center" BGCOLOR="#000000" COLSPAN="5" VALIGN="center"><FONT COLOR="#FFFFFF" FACE="Verdana, Arial" SIZE="2"><B>ViewPane</B></FONT></TD>
</TR>
<TR>
<TD ALIGN="center" BGCOLOR="#000000" ROWSPAN="6" VALIGN="center"><FONT COLOR="#FFFFFF" FACE="Verdana, Arial" SIZE="2"><B>C<BR>
o<BR>
n<BR>
t<BR>
e<BR>
n<BR>
t</B></FONT></TD>
<TD> </TD>
<TD BGCOLOR="#9999CC"><FONT FACE="Verdana, Arial" SIZE="1">VP1</FONT></TD>
<TD BGCOLOR="#AAAADD"><FONT FACE="Verdana, Arial" SIZE="1">VP2</FONT></TD>
<TD BGCOLOR="#BBBBEE"><FONT FACE="Verdana, Arial" SIZE="1">VP3</FONT></TD>
<TD BGCOLOR="#CCCCFF"><FONT FACE="Verdana, Arial" SIZE="1">VP4</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#CCCC33"><FONT FACE="Verdana, Arial" SIZE="1">C1</FONT></TD>
<TD ALIGN="center" BGCOLOR="#99CC33"><a href="javascript:changeContent(0,0)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#99CC55"><a href="javascript:changeContent(1,0)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#88CC66"><a href="javascript:changeContent(2,0)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#88CC88"><a href="javascript:changeContent(3,0)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
</TR>
<TR>
<TD BGCOLOR="#DDDD66"><FONT FACE="Verdana, Arial" SIZE="1">C2</FONT></TD>
<TD ALIGN="center" BGCOLOR="#99DD66"><a href="javascript:changeContent(0,1)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#98DD73"><a href="javascript:changeContent(1,1)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#98EE85"><a href="javascript:changeContent(2,1)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#97EE97"><a href="javascript:changeContent(3,1)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
</TR>
<TR>
<TD BGCOLOR="#EEEE99"><FONT FACE="Verdana, Arial" SIZE="1">C3</FONT></TD>
<TD ALIGN="center" BGCOLOR="#88EE88"><a href="javascript:changeContent(0,2)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#99EE99"><a href="javascript:changeContent(1,2)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#99FF99"><a href="javascript:changeContent(2,2)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#AAFFAA"><a href="javascript:changeContent(3,2)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
</TR>
<TR>
<TD BGCOLOR="#F7F7AA"><FONT FACE="Verdana, Arial" SIZE="1">C4</FONT></TD>
<TD ALIGN="center" BGCOLOR="#99EE99"><a href="javascript:changeContent(0,3)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#AAEEAA"><a href="javascript:changeContent(1,3)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#AAFFAA"><a href="javascript:changeContent(2,3)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#BBFFBB"><a href="javascript:changeContent(3,3)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFCC"><FONT FACE="Verdana, Arial" SIZE="1">C5</FONT></TD>
<TD ALIGN="center" BGCOLOR="#AAEEAA"><a href="javascript:changeContent(0,4)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#B7EEB7"><a href="javascript:changeContent(1,4)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#C0FFC0"><a href="javascript:changeContent(2,4)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
<TD ALIGN="center" BGCOLOR="#CCFFCC"><a href="javascript:changeContent(3,4)"><FONT FACE="Verdana, Arial" SIZE="1">x</FONT></a></TD>
</TR>
</TABLE>
<BR>
<FONT FACE="Verdana, Arial" SIZE="2">
<UL>
<LI><a href="javascript:rand_start()">Start random</a></LI>
<LI><a href="javascript:rand_stop()">Stop random</a></LI>
<LI><a href="javascript:rand_reset()">Reset random</a></LI>
<LI><a href="javascript:rand_mult(1)">1-up random</a></LI>
<LI><a href="javascript:rand_mult(2)">2-up random</a></LI>
<LI><a href="javascript:rand_mult(3)">3-up random</a></LI>
<LI><a href="javascript:rand_mult(4)">4-up random</a></LI>
<LI><a href="javascript:set_rand_n_rand(true)">?-up random (on)</a></LI>
<LI><a href="javascript:set_rand_n_rand(true)">?-up random (off)</a></LI>
<LI><a href="javascript:set_rand_interval(250)">0.25s interval</a></LI>
<LI><a href="javascript:set_rand_interval(500)">0.5s interval</a></LI>
<LI><a href="javascript:set_rand_interval(1000)">1s interval</a></LI>
<LI><a href="javascript:set_rand_interval(5000)">5s interval</a></LI>
<LI><a href="javascript:set_rand_interval(10000)">10s interval</a></LI>
</UL>
</FONT>
<script language="JavaScript" type="text/javascript">
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
