JavaScript DHTML/Ajax Layer/Timer Event — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 09:58, 26 мая 2010

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&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <P>Chronom&egrave;tre avec mise &agrave; jour dynamique :
      <FORM ACTION="GET" NAME="f">
        <INPUT NAME="t" TYPE=TEXT VALUE="0:00:00:00" SIZE=12>&nbsp;
        <INPUT TYPE=BUTTON VALUE="D&eacute;marrer / Arr&ecirc;ter"
        onClick="if (actifChrono()) arreterChrono(); else demarrerChrono();">&nbsp;
        <INPUT TYPE=BUTTON VALUE="Remettre &agrave; z&eacute;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>&nbsp;Tick @ 200ms <br>&nbsp;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>&nbsp; "+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>&nbsp;</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>&nbsp;</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>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Timer_Event&oldid=1658»