Icontem

File: sample.html

Recommend this page to a friend!
  Classes of Dixan Santiesteban  >  Custom clock  >  sample.html  >  Download  
File: sample.html
Role: Example script
Content type: text/plain
Description: The sample and help page
Class: Custom clock
Display a digital clock with the current time
Author: By
Last change: Fixed jquery ref
Date: 7 years ago
Size: 3,659 bytes
 

Contents

Class file image Download
<!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 &quot;-&quot; 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>&nbsp;</p>
    <p>&nbsp;</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>