Содержание

1 Start and stop a timer: Simulates a stop watch and displays the elapsed time
2 JsLib 1.3
3 Content #1
4 Content #2
5 Content #3
6 Content #4
7 Content #5

Start and stop a timer: Simulates a stop watch and displays the elapsed time

   <source lang="html4strict">

<!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()">

JsLib 1.3

Exemple - chrono.js

   <NOSCRIPT>

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.

   </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>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/JsLib13.zip">JsLib13.zip( 311 k)</a>

Timer event by DynAPI

   <source lang="html4strict">

<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=" Tick @ 200ms 
 Tick count="+o.getTickCount()+""
   o.setHTML(src)
 }

}) myClock.addEventListener({

 ontimer:function(e){
   var o=e.getSource()
   var src="  "+new Date()+""
   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>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Use Timer event to trigger ViewPane repaint

   <source lang="html4strict">

<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] = "\n" + " \n" + " \n" + " \n" + "

\n" + "

Content #1

\n" +

                 "      This is test messaage
\n" +
                 "      DynAPI\n" +
                 "        ViewPane\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" +

"

\n"; html_content[1] = "\n" + " \n" + " \n" + " \n" + "

\n" + "

Content #2

\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" +

"

"; html_content[2] = "\n" + " \n" + " \n" + " \n" + "

\n" + "

Content #3

\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" +

"

"; html_content[3] = "\n" + " \n" + " \n" + " \n" + "

\n" + "

Content #4

\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" +

"

"; html_content[4] = "\n" + " \n" + " \n" + " \n" + "

\n" + "

Content #5

\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" +

"

";

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>

	ViewPane
C o n t e n t		VP1	VP2	VP3	VP4
	C1	<a href="javascript:changeContent(0,0)">x</a>	<a href="javascript:changeContent(1,0)">x</a>	<a href="javascript:changeContent(2,0)">x</a>	<a href="javascript:changeContent(3,0)">x</a>
	C2	<a href="javascript:changeContent(0,1)">x</a>	<a href="javascript:changeContent(1,1)">x</a>	<a href="javascript:changeContent(2,1)">x</a>	<a href="javascript:changeContent(3,1)">x</a>
	C3	<a href="javascript:changeContent(0,2)">x</a>	<a href="javascript:changeContent(1,2)">x</a>	<a href="javascript:changeContent(2,2)">x</a>	<a href="javascript:changeContent(3,2)">x</a>
	C4	<a href="javascript:changeContent(0,3)">x</a>	<a href="javascript:changeContent(1,3)">x</a>	<a href="javascript:changeContent(2,3)">x</a>	<a href="javascript:changeContent(3,3)">x</a>
	C5	<a href="javascript:changeContent(0,4)">x</a>	<a href="javascript:changeContent(1,4)">x</a>	<a href="javascript:changeContent(2,4)">x</a>	<a href="javascript:changeContent(3,4)">x</a>

<a href="javascript:rand_start()">Start random</a>
<a href="javascript:rand_stop()">Stop random</a>
<a href="javascript:rand_reset()">Reset random</a>
<a href="javascript:rand_mult(1)">1-up random</a>
<a href="javascript:rand_mult(2)">2-up random</a>
<a href="javascript:rand_mult(3)">3-up random</a>
<a href="javascript:rand_mult(4)">4-up random</a>
<a href="javascript:set_rand_n_rand(true)">?-up random (on)</a>
<a href="javascript:set_rand_n_rand(true)">?-up random (off)</a>
<a href="javascript:set_rand_interval(250)">0.25s interval</a>
<a href="javascript:set_rand_interval(500)">0.5s interval</a>
<a href="javascript:set_rand_interval(1000)">1s interval</a>
<a href="javascript:set_rand_interval(5000)">5s interval</a>
<a href="javascript:set_rand_interval(10000)">10s interval</a>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

JavaScript DHTML/Ajax Layer/Timer Event

Содержание

Start and stop a timer: Simulates a stop watch and displays the elapsed time

JsLib 1.3

Exemple - chrono.js

Timer event by DynAPI

Use Timer event to trigger ViewPane repaint

Content #1

Content #2

Content #3

Content #4

Content #5

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты