<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="datetime.class.js"></script>
<style>
body { font-family:Arial, Helvetica, sans-serif; font-size:12px;}
LABEL { display:inline-block; }
.tbclock TD{ white-space:nowrap; }
.Estilo1 {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
}
</style>
<title>Digital Clock - by Dixan Santiesteban</title>
</head>
<body>
<h1>Configurable clock, multilanguage</h1>
<h3>Dixan Santiesteban Feria, CUBA</h3><hr />
<table width="100%" border="0">
<tr>
<td width="49%" valign="top">
Sample#1: Blue<br />
Dijital Clock with Spanish lang (default)<br /><br />
<div id="miclock">
</div>
<br />
Sample#2: Red<br />
Change the date position and format and english lang.<br /><br />
<div id="miclock1">
</div><br />
Sample#3: Green<br />
Hide military time and blink separator with italian date.<br />
(without Seconds...)<br /><br />
<div id="miclock2">
</div>
</td>
<td width="51%" valign="top"><p>HELP:</p>
<p class="Estilo1"><strong>var</strong> a=<strong>new</strong> clock(<em>format</em>,<em>parent</em>,<em>properties</em>);</p>
<p><em><strong>format:</strong></em> a string that represent the time format of our dijital clock</p>
<p><strong>H</strong>: Hours,
<strong>M</strong>: Minuts,
<strong>S</strong>: Seconds ,
<strong>T</strong>: am or pm ,
<strong>W</strong>: Day of week ,
<strong>O</strong>: Month, <strong> D</strong>: Day,
<strong>Y</strong>: Year,(<strong> | )</strong>: Next line (date zone),( / ): Minislash (date zone),
( -) : represent a "-" caracter (date zone), (_) The date zone at left,
<strong>( , )</strong>: The date zone at down</p>
<p><em><strong>Parent:</strong></em> Id of the parent object .</p>
<p><em><strong>Properties:</strong></em> define the aparience of the clock.</p>
<p><em>color:</em> color of digits.<br />
<em>_blink:</em> Set blink , values: [yes|<em>no</em>] <br />
<em>military:</em> Disable military zone, values: [<em>yes</em>|no] <br />
<em>lang</em>: Set the language, values [<em>spanish</em>,
english,
french,
italian,
portuguese]</p>
<p><strong>Sample 1: (view at left)<br />
<span class="Estilo1">var</span></strong><span class="Estilo1"> a=<strong>new</strong> clock('H:M:S_WD|O/Y',$('#miclock'),{color:'#0000FF'});</span></p>
<p><strong>Sample 2: (view at left)</strong><br />
<span class="Estilo1">var a=new clock('H:M:S,W|O/D Y',$('#miclock1'),{color:'#FF0000',_blink:'yes',lang:'english'});</span></p>
<p><strong>Sample 3: (view at left)</strong><br />
<span class="Estilo1">var a=new clock('H:MT_O/D-Y|W',$('#miclock2'),{color:'#009900',military:'no',_blink:'yes',lang:'italian'});</span></p>
<p> </p>
<p> </p></td>
</tr>
</table>
</body>
</html>
<script>
$(function(){
var a=new clock('H:M:S_WD|O/Y',$('#miclock'),{color:'#0000FF'});
var a=new clock('H:M:S,W|O/D Y',$('#miclock1'),{color:'#FF0000',_blink:'yes',lang:'english'});
var a=new clock('H:MT_O/D-Y|W',$('#miclock2'),{color:'#009900',military:'no',_blink:'yes',lang:'italian'});
})
</script>
|
Download
