JavaScript DHTML/GUI Components/Clock — различия между версиями

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

Текущая версия на 07:44, 26 мая 2010

Animation: clock

//Silly Clock - http://www.btinternet.ru/~kurt.grigg/javascript
/*
1: Paste this style sheet to the head of your page HTML. 
   Do not alter it! Everything is set for alignment!
<style type="text/css">
<!--
.css1{
position : absolute;
top : 0px;
left : 0px;
width : 16px;
height : 16px;
font-family : Arial,sans-serif;
font-size : 16px;
text-align : center;
font-weight : bold;
}
.css2{
position : absolute;
top : 0px;
left : 0px;
width : 10px;
height : 10px;
font-family : Arial,sans-serif;
font-size : 10px;
text-align : center;
}
//-->
</style>

2: The on off button:
   Paste where you want it to appear in the page.
<script type="text/javascript">
<!--
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
document.write("<input type="button" id="clockcontrol" value="Clock Off"/>");
}
//-->
</script>

3: The clock:
   Paste this js link in to the body, idealy as the last thing just before </body></html>.
<script type="text/javascript" src="sillyclock.js"></script>

To alter colours, right click on the sillyclock.js file and choose edit. The colours are
near the top.
Make sure the sillyclock.js file is uploaded to the same directory as the web page using it!
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Silly Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
body{
background-color : #000000;
}
.css1{
position : absolute;
top : 0px;
left : 0px;
width : 16px;
height : 16px;
font-family : Arial,sans-serif;
font-size : 16px;
text-align : center;
font-weight : bold;
}
.css2{
position : absolute;
top : 0px;
left : 0px;
width : 10px;
height : 10px;
font-family : Arial,sans-serif;
font-size : 10px;
text-align : center;
}
//-->
</style>
</head>
<body>



<div class="centre">
<script type="text/javascript">
<!--

if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
document.write("<input type="button" id="clockcontrol" value="Clock Off"/>");
}

//-->
</script>
</div>



<script type="text/javascript">
//Silly Clock - http://www.btinternet.ru/~kurt.grigg/javascript
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
(function(){
//Configure here...
//Clock colours
var dCol = "#ff0000"; //date colour.
var fCol = "#ff0000"; //face colour.
var sCol = "#0000ff"; //seconds colour.
var mCol = "#ff0000"; //minutes colour.
var hCol = "#ff0000"; //hours colour.
//Controls
var del = 0.6;        //follow mouse speed.
var rep = 50;         //run speed (setTimeout).
//End.
var theDays = new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
var theMonths = new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var timer = null;
var vis = true;
var ofy = -7;
var ofx = -3;
var ofst = 70;
var date = new Date();
var day = date.getDate();
var year = date.getYear();
 if (year < 2000) year = year+1900; 
var dt = " " + theDays[date.getDay()] + " " + day + " " + theMonths[date.getMonth()] + " " + year;
var todaysDate = dt.split("");
var tdlen = todaysDate.length;
var clockFace = "3 4 5 6 7 8 9 10 11 12 1 2";
var cfa = clockFace.split(" ");
var cflen = cfa.length;
var _h = "...";
var hourfin = _h.split("");
var hlen = hourfin.length;
var _m = "....";
var minfin = _m.split("");
var mlen = minfin.length;
var _s = ".....";
var secfin = _s.split("");
var slen = secfin.length;
var dims = 40;
var Q1 = 360/cflen;
var Q2 = 360/todaysDate.length;
var handlen = dims/5.5;
var dy=new Array();
var dx=new Array();
var zy=new Array();
var zx=new Array();
var theSeconds = new Array();
var theMinutes = new Array(); 
var theHours = new Array();
var theDial = new Array(); 
var theDate = new Array();
var sum = tdlen + cflen + hlen + mlen + slen + 1;
for (i = 0; i < sum; i++){
dy[i] = 0;
dx[i] = 0;
zy[i] = 0;
zx[i] = 0;
}
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName("div").length;
var isButton = (document.getElementById("clockcontrol"));
if (isButton)
var controlButton = document.getElementById("clockcontrol");
if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}
for (i=0; i < tdlen; i++){
 document.write("<div id="_date"+(idx+i)+"" class="css2" style="color:"+dCol+"">"+todaysDate[i]+"<\/div>");
}
for (i=0; i < cflen; i++){
 document.write("<div id="_face"+(idx+i)+"" class="css2" style="color:"+fCol+"">"+cfa[i]+"<\/div>");
}
for (i=0; i < hlen; i++){
 document.write("<div id="_hours"+(idx+i)+"" class="css1" style="color:"+hCol+"">"+hourfin[i]+"<\/div>");
}
for (i=0; i < mlen; i++){
 document.write("<div id="_minutes"+(idx+i)+"" class="css1" style="color:"+mCol+"">"+minfin[i]+"<\/div>");
}
for (i=0; i < slen; i++){
 document.write("<div id="_seconds"+(idx+i)+"" class="css1" style="color:"+sCol+"">"+secfin[i]+"<\/div>");
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh; 
w = rw;
}
else{
h = r.clientHeight; 
w = r.clientWidth;
}
}

function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}

function OnOff(){
if (vis){ 
 vis = false;
 controlButton.value = "Clock On";
 }
else{ 
 vis = true;
 controlButton.value = "Clock Off";
 Delay();
 }
kill();
}

function kill(){
if (vis) 
 mouseControl(true);
else 
 mouseControl(false);
} 

function mouseControl(needed){
if (window.addEventListener){
 if (needed){
  document.addEventListener("mousemove",mouse,false);
 }
 else{ 
  document.removeEventListener("mousemove",mouse,false);
 }
}  
if (window.attachEvent){
 if (needed){
  document.attachEvent("onmousemove",mouse);
 }
 else{ 
  document.detachEvent("onmousemove",mouse);
 }
}
}

function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == "number"){
  my = e.pageY + ofst - msy;
  mx = e.pageX + ofst;
 }
 else{
  my = e.clientY + ofst - msy;
  mx = e.clientX + ofst;
 }
if (!vis) kill();
}

function theClock(){
var time = new Date();
var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);
var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);
var hrs = time.getHours();
if (hrs > 12){
 hrs -= 12;
}
var hrOffSet = hrs - 3;
if (hrs < 3){ 
 hrOffSet = hrs+9;
}
var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;
for (i=0; i < slen; i++){
 theSeconds[i].top = dy[tdlen + cflen + hlen + mlen + i] + ofy + (i * handlen) * Math.sin(sec) + scrl(0) + pix;
 theSeconds[i].left = dx[tdlen + cflen + hlen + mlen + i] + ofx + (i * handlen) * Math.cos(sec) + pix;
 }
for (i=0; i < mlen; i++){
 theMinutes[i].top = dy[tdlen + cflen + hlen + i] + ofy + (i * handlen) * Math.sin(min) + scrl(0) + pix;
 theMinutes[i].left = dx[tdlen + cflen + hlen + i] + ofx + (i * handlen) * Math.cos(min) + pix;
 }
for (i=0; i < hlen; i++){
 theHours[i].top = dy[tdlen + cflen + i] + ofy + (i * handlen) * Math.sin(hr) + scrl(0) + pix;
 theHours[i].left = dx[tdlen + cflen + i] + ofx + (i * handlen) * Math.cos(hr) + pix;
 }
for (i=0; i < cflen; i++){
 theDial[i].top = dy[tdlen + i] + dims * Math.sin(i * Q1 * Math.PI/180) + scrl(0) + pix;
 theDial[i].left = dx[tdlen + i] + dims * Math.cos(i * Q1 * Math.PI/180) + pix;
 }
for (i=0; i < tdlen; i++){
 theDate[i].top = dy[i] + dims * 1.5 * Math.sin(-sec + i * Q2 * Math.PI/180) + scrl(0) + pix;
 theDate[i].left = dx[i] + dims * 1.5 * Math.cos(-sec + i * Q2 * Math.PI/180) + pix;
 }
if (!vis) clearTimeout(timer);
}

function Delay(){
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((my)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mx)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= h-80) dy[i-1]=h-80;
if (dx[i-1] >= w-80) dx[i-1]=w-80;
}
timer = setTimeout(Delay,rep);
theClock();
}

function init(){
for (i=0; i < tdlen; i++){
 theDate[i] = document.getElementById("_date"+(idx+i)).style;
}
for (i=0; i < cflen; i++){
 theDial[i] = document.getElementById("_face"+(idx+i)).style; 
}
for (i=0; i < hlen; i++){
 theHours[i] = document.getElementById("_hours"+(idx+i)).style;
}
for (i=0; i < mlen; i++){
 theMinutes[i] = document.getElementById("_minutes"+(idx+i)).style; 
}
for (i=0; i < slen; i++){
 theSeconds[i] = document.getElementById("_seconds"+(idx+i)).style;         
}
winsize();
mouseControl(true);
Delay();
}
if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
 if (isButton){
  controlButton.addEventListener("click",OnOff,false);
 }
}  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 window.attachEvent("onresize",winsize);
 if (isButton){
 controlButton.attachEvent("onclick",OnOff);
 }
} 
})();
}//End.
</script>



</body>
</html>



Calendar with Clock

<html>
<head>
<title>DynAPI Examples - Template Manager</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLCalendar");
dynapi.library.include("HTMLRollover");
dynapi.library.include("HTMLClock");
dynapi.library.include("HTMLMenu");
</script>
<script language="Javascript">
// HTML code/templates
var template1="<table cellSpacing=0 cellPadding=0 width=340 border=0>\n  <tr>\n    <td width=10><img src="./dynapiexamples/images/edge.tplt.gif" border=0 width="10" height="10" /></td>\n    <td width=320 background="./dynapiexamples/images/edge.tp.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0 /></td>\n    <td width=10><img height=10 src="./dynapiexamples/images/edge.tprt.gif" width="10" border="0" /></td>\n  </tr>\n  <tr>\n      <td width=10 background="./dynapiexamples/images/edge.lt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n      <td vAlign=top width=320 bgColor=#f5f5f5>\n      <table cellSpacing=0 cellPadding=4 width="100%" border=0>\n      <tr>\n        <td noWrap align=center bgcolor="#FFFFFF" width="100%">\n        <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">\n          <tr>\n          <td width="100%">\n          <img border=0 src="./dynapiexamples/images/htmlcomponents.gif" width="285" height="42"></td>\n          </tr>\n          <tr>\n          <td width="100%" bgcolor="003366">\n          {@hmenu}\n          </td>\n          </tr>\n          <tr>\n          <td width="100%">\n          <table border="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" cellspacing="3">\n            <tr>\n            <td valign="top">\n            <table border="0" cellpadding="2" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="103" id="AutoNumber2">\n              <tr>\n              <td width="93" align="center">{@hbtn1}</td>\n              </tr>\n              <tr>\n              <td width="93" align="center">{@hbtn2}</td>\n              </tr>\n              <tr>\n              <td width="93" align="center"><br>\n                {@hclk}</td>\n              </tr>\n            </table>\n            </td>\n            <td valign="top">{@hcal}</td>\n            </tr>\n          </table>\n          </td>\n          </tr>\n          <tr>\n          <td width="100%" align="right">{@lyr1}</td>\n          </tr>\n          <tr>\n          <td width="100%" align="center" style="border-top: 1px solid #000000" bgcolor="#F5F5F5"><b>\n        <font face="Arial, Helvetica, sans-serif" size="2" color="#800000">DynAPI</font></b><font color=#333333 \n        face="Arial, Helvetica, sans-serif" size=2> |&nbsp; {@hlink}</font></td>\n          </tr>\n        </table>          \n        </td>\n      </tr>\n      </table>\n    </td>\n      <td width=10 background="./dynapiexamples/images/edge.rt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n  </tr>\n  <tr>\n      <td width=10><img height=10 src="./dynapiexamples/images/edge.bmlt.gif" width=10 border=0></td>\n      <td width=320 background="./dynapiexamples/images/edge.bm.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0></td>\n      <td width=10><img height=10 src="./dynapiexamples/images/edge.bmrt.gif" width=10 border=0></td>\n    </tr>\n</table>";
var tp = new Template(template1,150,40,400,360);
var imgPath = "./dynapiexamples/images/";;
var btn_home = imgPath+"btn_home_";
var btn_contact = imgPath+"btn_contact_";
var btnE = {
  onclick:function(e){
    alert("Hello from  "+e.getSource()._tmplFld)
  }
};
// HTMLMenu
var mbar;
tp.addChild(new HTMLMenu(),"hmenu");
// Main Menu
mbar= tp.hmenu.createMenuBar("main",40,20);
mbar.addItem(null,"File","file");
mbar.addItem(null,"Edit","edit");
mbar.addItem(null,"View","view");
mbar.addItem(null,"Tools","tools");
mbar.addItem(null,"Help","help");
  //File menu
  mbar = tp.hmenu.createMenuBar("file",130);
  mbar.addItem(null,"New");
  mbar.addItem(null,"Open",null,"alert("Open files")",null,null,"navy","red");
  mbar.addItem(null,"Save");
  mbar.addItem(null,"Save As ...");
  mbar.addItem(null,"Recent Files","recent");
  mbar.addItem(null,"Exit");
    //Recent menu
    mbar = tp.hmenu.createMenuBar("recent",120);
    mbar.addItem(null,"Dynapi.js");
    mbar.addItem(null,"Quickref.html");
    mbar.addItem(null,"Changelog.html");
    mbar.addItem(null,"Index.html");
  //edit menu
  mbar = tp.hmenu.createMenuBar("edit",120);
  mbar.addItem(null,"Undo");
  mbar.addItem(null,"Cut");
  mbar.addItem(null,"Copy");
  mbar.addItem(null,"Paste");
  //view menu
  mbar = tp.hmenu.createMenuBar("view",130);
  mbar.addItem(null,"Go");
  mbar.addItem(null,"Stop");
  mbar.addItem(null,"Toolbars","tbar");
  mbar.addItem(null,"Status Bar");
    // tbar
    mbar = tp.hmenu.createMenuBar("tbar",120);
    mbar.addItem(null,"Header");
    mbar.addItem(null,"Footer");
    mbar.addItem(null,"Standard");
    mbar.addItem(null,"Drawing");
  //tools menu
  mbar = tp.hmenu.createMenuBar("tools",120);
  mbar.addItem(null,"Options");
  mbar.addItem(null,"Macro");
  mbar.addItem(null,"Convert...");
  mbar.addItem(null,"Run...");
//HTMLRollovers
tp.addChild(new HTMLRollover(null,85,29,btn_home+"off.gif",btn_home+"on.gif"),"hbtn1");
tp.addChild(new HTMLRollover(null,85,29,btn_contact+"off.gif",btn_contact+"on.gif"),"hbtn2");
tp.hbtn1.addEventListener(btnE);
tp.hbtn2.addEventListener(btnE);
//HTMLHyperLink
tp.addChild(new HTMLHyperLink(null,"Click Here","http://dynapi.sf.net"),"hlink");
tp.hlink.startFlash("blue","black")
tp.hlink.addEventListener({
  onclick:function(e){
    var o=e.getSource();
    alert("A link to DynAPI"s website")
    // o.allowEvent(); // By default HyperLink events are canceled (return false)
  }
});

//HTMLClock
tp.addChild(new HTMLClock(),"hclk");

// HTML Calender
hc = tp.addChild(new HTMLCalendar(),"hcal");
// modify colors
hc.borCol = "#000000";
hc.titleBgCol ="maroon";
hc.titleFgCol ="white";
hc.wkDayBgCol ="beige";
hc.selBorCol = "#CCCCCC";
hc.selBgCol = "#DEDEFF";
hc.selTDayBgCol = "beige";
hc.addEventListener({
  onchange:function(e){
    var o=e.getSource();
    var l=o.parent.lyr1;
    if(l) {
      var dt = o.getDate();
      dt=(!dt)? "":(dt.getMonth()+1)+"/"+dt.getDate()+"/"+dt.getFullYear();
      o.parent.lyr1.setHTML("<font face="arial" size="2">Date is "+dt+"</font>");
    }
  }
});
//DynLayer
tp.addChild(new DynLayer(null,0,0,200,20),"lyr1");
dynapi.document.addChild(tp);
</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>


Digital Clock

//Digital Clock - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this js-link to where ever you want the clock to appear on your page.
<script type="text/javascript" src="digitalclock.js"></script>

Make sure ALL the images are in a folder/directory called exactly "digital" and 
that it and the digitalclock.js file are in the same folder as the web page using 
the script.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Digital Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

</head>
<body style="background-color:#000000">

<script type="text/javascript">
//Digital Clock - http://www.btinternet.ru/~kurt.grigg/javascript

(function(){
var load_pics = [];
var pics = [];
for(i = 0; i < 12; i++){
 load_pics[i] = i+".gif";
}              
for(i = 0; i < load_pics.length; i++){
 pics[i] = new Image();
 pics[i].src = "digital/"+load_pics[i];
}
var idx = document.images.length;
var get_digit_pos = -1;
var digit_pos = [];
var ini_src = [];
var pic_width = [];
for (i = 0; i < 8; i++){
var comma = (i == 2 || i == 5);
if (!comma){ 
 get_digit_pos++;
}
ini_src[i] = (comma)?"digital/11.gif":"digital/10.gif";
pic_width[i] = (comma)?9:16;
digit_pos[i] = get_digit_pos;
if (digit_pos[i] == digit_pos[i-1]){ 
digit_pos[i] = "";
}
document.write("<img name=""+idx+"digits"+digit_pos[i]+"" src="+ini_src[i]+" height="21" width=""+pic_width[i]+"" alt=""/>")
}
function digitalclock(){
var x = new Date();
var s = x.getSeconds();
var m = x.getMinutes();
var h = x.getHours();
var the_time = ((h < 10)?"0"+h:h)+""+((m < 10)?"0"+m:m)+""+((s < 10)?"0"+s:s);
for (i = 0; i < the_time.length; i++){
document.images[idx+"digits"+i].src = pics[the_time.charAt(i)].src;
}
setTimeout(digitalclock,100);
}
digitalclock();
})();
</script>
</body>
</html>


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


Fancy Clock

//World Clock (No DST - standard time only!) 
//By http://www.btinternet.ru/~kurt.grigg/javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>World Clock. No DST, standard time only!</title>

<style type = "text/css">
body{
 background-color : #000000;
}
/*Alter .theContainer background colour & border styles only*/

.theContainer{
position:relative;width:120px;height:160px;text-align:center;
background-color:#880000;border: 2px solid #ff0000;
}
.handsanddotsstyle{
position:absolute;top:0px;left:0px;width:2px;height:2px;
font-size:2px;background-color:#000000;
}
.ampmstyle{
position:absolute;top:0px;left:0px;width:20px;height:10px;
text-align:center;font-family:arial,sans-serif;font-size:12px;color:#000000;
}
.datestyle{
position:absolute;top:0px;left:0px;width:100px;text-align:center;
font-family:arial,sans-serif;font-size:11px;color:#000000;
}
.facestyle{
position:absolute;top:0px;left:0px;width:15px;height:15px;
text-align:center;font-family:arial,sans-serif;font-size:10px;color:#000000;
}
.citystyle{
position:absolute;top:0px;left:0px;width:110px;height:20px;z-index:100;
}
.selectstyle{
width:110px;font-family:arial,sans-serif;font-size:12px;color:#ffffff;
background:#000000;
}
</style>



</head>
<body>
<p>
<script type="text/javascript">
//World Clock (No DST - standard time only!) 
//By http://www.btinternet.ru/~kurt.grigg/javascript

if ((document.getElementById && 
document.firstChild &&
typeof document.getElementsByTagName != "undefined") &&
window.addEventListener || window.attachEvent){
(function(){
//Alter clock colours here:
var fCol = "#fff000"; //face/number colour.
var dCol = "#ff0000"; //dot colour.
var hCol = "#ffffff"; //hours colour.
var mCol = "#ffffff"; //minutes colour.
var sCol = "#ff0000"; //seconds colour.
var cCol = "#fff000"; //date colour.
var aCol = "#ff0000"; //am-pm colour.
var bCol = "#880000"; //select/form background colour.
var tCol = "#fff000"; //select/form text colour.
//Add places here - make sure format is correct!
var locations = [
["Your Time","0"],
["GMT","0"],  
["Rome","1"], 
["Cairo","2"], 
["Moscow","3"], 
["Tehran","3.30"], 
["Karachi","5"], 
["Bombay","5.30"], 
["Kathmandu","5.45"],
["Bangkok","7"], 
["Hong Kong","8"], 
["Tokyo","9"], 
["Darwin","9.30"], 
["Sydney","10"], 
["Suva","12"], 
["Honolulu","-10"], 
["San Francisco","-8"], 
["Arizona","-7"], 
["New York","-5"], 
["Newfoundland","-3.30"], 
["Nuuk","-3"]];

//Alter nothing below! Alignments will be lost!
var d = document;
var idx = d.getElementsByTagName("div").length;
var ids = d.getElementsByTagName("select").length;
var y = 87;
var x = 60;
var h = 4;
var m = 5;
var s = 5;
var cf = [];
var cd = [];
var ch = [];
var cm = [];
var cs = [];
var face = "3 4 5 6 7 8 9 10 11 12 1 2";
face = face.split(" ");
var n = face.length;
var e = 360/n;
var hDims = 30/4;
var zone = 0;
var isItLocal = true;
var ampm = "";
var daysInMonth = 31;
var todaysDate = "";
var oddMinutes;
var getOddMinutes;
var addOddMinutes;
var plusMinus = false;
d.write("<div class = "theContainer">"                                    
+"<div id = "theCities"+idx+"" class = "citystyle">"
+"<p style = "margin:0px;">" 
+"<select id = "city"+ids+"" class = "selectstyle">");
for (var i = 0; i < locations.length; i++){
 d.write("<option value = "+locations[i][1]+">"+locations[i][0]+"<\/option>");
}
d.write("<\/select><\/p><\/div>");
d.write("<div id = "theDate"+(idx)+"" class = "datestyle" style = "color:"+cCol+"">\!<\/div>");
d.write("<div id = "amOrPm"+(idx)+"" class = "ampmstyle" style = "color:"+aCol+"">\!<\/div>");
for (var i = 0; i < n; i++){
 d.write("<div id = "theFace"+(idx+i)+"" class="facestyle" style="color:"+fCol+"">"+face[i]+"<\/div>"); 
}
for (var i = 0; i < n; i++){
 d.write("<div id = "theDots"+(idx+i)+"" class = "handsanddotsstyle" style = "background-color:"+dCol+""><\/div>");
}
for (var i = 0; i < h; i++){
 d.write("<div id = "H"+(idx+i)+"" class = "handsanddotsstyle" style = "background-color:"+hCol+""><\/div>");
}
for (var i = 0; i < m; i++){
 d.write("<div id = "M"+(idx+i)+"" class = "handsanddotsstyle" style = "background-color:"+mCol+""><\/div>");
}
for (var i = 0; i < s; i++){
 d.write("<div id = "S"+(idx+i)+"" class = "handsanddotsstyle" style = "background-color:"+sCol+""><\/div>");
}
d.write("<\/div>");

function init(){
for (var i = 0; i < n; i++){
 cf[i] = d.getElementById("theFace"+(idx+i)).style;
  cf[i].top = y-6+30*1.4*Math.sin(i*e*Math.PI/180)+"px";
  cf[i].left = x-6+30*1.4*Math.cos(i*e*Math.PI/180)+"px";
 }
for (var i = 0; i < n; i++){
 cd[i] = d.getElementById("theDots"+(idx+i)).style;
  cd[i].top = y+30*Math.sin(i*e*Math.PI/180)+"px";
  cd[i].left = x+30*Math.cos(i*e*Math.PI/180)+"px";
 }
for (var i = 0; i < h; i++){
 ch[i] = d.getElementById("H"+(idx+i)).style;
 }
for (var i = 0; i < m; i++){
 cm[i] = d.getElementById("M"+(idx+i)).style;
 }
for (var i = 0; i < s; i++){
 cs[i] = d.getElementById("S"+(idx+i)).style;
 }

d.getElementById("amOrPm"+idx).style.top = y-8+"px";
d.getElementById("amOrPm"+idx).style.left = x+6+"px";
d.getElementById("theCities"+idx).style.top = y-80+"px";
d.getElementById("theCities"+idx).style.left = x-55+"px";
d.getElementById("theDate"+idx).style.top = y+55+"px";
d.getElementById("theDate"+idx).style.left = x-49+"px";
d.getElementById("city"+ids).style.backgroundColor = bCol;
d.getElementById("city"+ids).style.color = tCol;
ClockAndAssign();
}

function lcl(){
var c = document.getElementById("city"+ids);
zone = c.options[c.selectedIndex].value;
isItLocal = (c.options[0].selected);
plusMinus = (zone.charAt(0) == "-");
oddMinutes = (zone.indexOf(".") != -1);
if (oddMinutes){
 getOddMinutes = zone.substring(zone.indexOf(".")+1,zone.length);
 }
if (plusMinus)
 addOddMinutes = (oddMinutes)?parseInt(-getOddMinutes):0;
else
 addOddMinutes = (oddMinutes)?parseInt(getOddMinutes):0;
}

function ClockAndAssign(){
var hourAdjust = 0;
var dayAdjust = 0;
var monthAdjust = 0;
var now = new Date();
var ofst = now.getTimezoneOffset()/60;
var secs = now.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs + 45;
 }
var sec = Math.PI * (secOffSet/30);
var mins = now.getMinutes();
if (oddMinutes){ 
 mins = mins+addOddMinutes;
 }
var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins + 45;
 }
var min = Math.PI * (minOffSet/30);
if (mins < 0){
 mins += 60;
 hourAdjust = -1;
 }
if (mins > 59){
 mins -= 60;
 hourAdjust = 1;
 }
hr = (isItLocal)?now.getHours()+hourAdjust:(now.getHours()+parseInt(ofst))+parseInt(zone)+hourAdjust;
hrs = Math.PI * (hr-3)/6 + Math.PI * (parseInt(mins)) / 360;
if (hr < 0){
 hr += 24;
 dayAdjust = -1;
 }
if (hr > 23){
 hr -= 24;
 dayAdjust = 1;
 }
day = now.getDate() + dayAdjust;
if (day < 1){
 day += daysInMonth; 
 monthAdjust = -1;
 }
if (day > daysInMonth){
 day -= daysInMonth; 
 monthAdjust = 1;
 }
month = parseInt(now.getMonth() + 1 + monthAdjust);
if (month == 2){
 daysInMonth = 28;
 }
year = now.getYear();
if (year < 2000){
 year = year + 1900;
 }
leapYear = (year%4 == 0);
if (leapYear&&month == 2){
 daysInMonth = 29;
 }
if (month < 1){
 month += 12;
 year--;
 }
if (month > 12){
 month -= 12;
 year++;
 }
todaysDate = day+" "+month+" "+year;
ampm = (hr > 11)?"pm":"am";
for (var i = 0; i < s; i++){
 cs[i].top = y+(i*hDims)*Math.sin(sec) + "px";
 cs[i].left = x+(i*hDims)*Math.cos(sec) + "px";
 }
for (var i = 0; i < m; i++){
 cm[i].top = y+(i*hDims)*Math.sin(min) + "px";
 cm[i].left = x+(i*hDims)*Math.cos(min) + "px";
 }
for (var i = 0; i < h; i++){
 ch[i].top = y+(i*hDims)*Math.sin(hrs) + "px";
 ch[i].left = x+(i*hDims)*Math.cos(hrs) + "px";
 }
d.getElementById("amOrPm"+idx).firstChild.data = ampm;
d.getElementById("theDate"+idx).firstChild.data = todaysDate;
setTimeout(ClockAndAssign,100);
}

if (window.addEventListener){
 window.addEventListener("load",init,false);
 d.getElementById("city"+ids).addEventListener("change",lcl,false);
 }  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 d.getElementById("city"+ids).attachEvent("onchange",lcl);
 } 
})();
}
</script>
</p>

</body>
</html>



JavaScript Clock

<html>
<head>
<title>DynAPI Examples - HTML Clock</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLClock");
dynapi.library.include("FlashSound");
</script>
<script language="Javascript">
fs = new FlashSound();
fs.setSWF("images/sndfx.swf");
HTMLComponent.setFlashSound(fs); // Set FlashSound object for all HCs
// Mozilla will collapse/expand table cells whenever the content of the layer changes. To solve this, specify a width for your table cells
var tp = new Template("This clock will alarm every 15 seconds<br><br><center><table background="images/blue_back_strip.gif" border="0"><tr><td width="90" height="90">{@fld}</td></tr></table></center>",100,100,200,200,"#EEEEEE");
tp.addChild(new HTMLClock(),"fld");
tp.fld.sndOnAlarm = "/alarm@start";
var dt = new Date();
dt = Date.parse(dt)+15000
tp.fld.setAlarm(dt); // or we could do tp.fld.setAlarm("13:30:00");
tp.fld.addEventListener({
  onalarm : function(e){
    var dt = new Date();
    status="This is an alarm @" + dt;
    dt = Date.parse(dt)+15000
    tp.fld.setAlarm(dt);
  }
});
dynapi.document.addChild(tp);

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


JavaScript Clock (2)

<html>
<head>
<title>Java Script Clock</title>
<BR>
<BR>
<BR>
<CENTER>
    <IMG SRC="digitblank.gif" border=0 name="hourstens">
    <IMG SRC="digitblank.gif" border=0 name="hoursones">
    <IMG SRC="digitblank.gif" border=0 name="colon">
    <IMG SRC="digitblank.gif" border=0 name="minstens">
    <IMG SRC="digitblank.gif" border=0 name="minsones">
    <IMG SRC="digitblank.gif" border=0 name="ampm">
</center>

<SCRIPT LANGUAGE="JavaScript">
  if (document.images) { 
    digit1 = new Image; 
    digit1.src = "digit1.gif"; 
  digit2 = new Image; 
    digit2.src = "digit2.gif";
  digit3 = new Image; 
    digit3.src = "digit3.gif";
  digit4 = new Image; 
    digit4.src = "digit4.gif";
  digit5 = new Image; 
    digit5.src = "digit5.gif";
  digit6 = new Image; 
    digit6.src = "digit6.gif";
  digit7 = new Image; 
    digit7.src = "digit7.gif";
  digit8 = new Image; 
    digit8.src = "digit8.gif";
  digit9 = new Image; 
    digit9.src = "digit9.gif";
  digit0 = new Image; 
    digit0.src = "digit0.gif";
  digitam = new Image; 
    digitam.src = "digitam.gif";
  digitpm = new Image; 
    digitpm.src = "digitpm.gif";
  digitcolon = new Image;
  digitcolon.src = "digitcolon.gif";
  digitblank = new Image;
  digitblank.src = "digitblank.gif";
  }
  
function UpdateClock(){
    var time= new Date();
    hours = time.getHours();
    mins = time.getMinutes();
    if (!document.images) return;
  digit = mins % 10;
    document.images.minsones.src=eval("digit"+digit+".src");
  digit = (mins - (mins % 10))/10;
  document.images.minstens.src=eval("digit"+digit+".src");
  if (hours > 12)
    document.images.ampm.src=digitpm.src;
  else
    document.images.ampm.src=digitam.src;
  if (hours > 12) hours = hours - 12;
  digit = hours % 10;
  document.images.hoursones.src=eval("digit"+digit+".src");
  digit = (hours - (hours % 10))/10;
  document.images.hourstens.src=eval("digit"+digit+".src");
  document.images.colon.src=digitcolon.src;
  setTimeout("UpdateClock()",30000);
  }
   UpdateClock();
</SCRIPT>
</body>
</html>


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


Live image clock

<script language="JavaScript1.1">
<!--
/*
Live image clock III
Written by Alon Gibli (http://www.angelfire.ru/biz6/deathrowtech)
Visit http://wsabstract.ru for this script and more
*/
// Setting variables
dig = new Image()
dig[0] = "0.gif"
dig[1] = "1.gif"
dig[2] = "2.gif"
dig[3] = "3.gif"
dig[4] = "4.gif"
dig[5] = "5.gif"
dig[6] = "6.gif"
dig[7] = "7.gif"
dig[8] = "8.gif"
dig[9] = "9.gif"
//writing images
document.write("<table border=1 cellspacing=0 bgcolor="silver">")
document.write("<tr><td><img src="0.gif" name="hrs1"></img>")
document.write("<img src="0.gif" name="hrs2"></img>")
document.write("<td><img src="col.gif"></img>")
document.write("<td><img src="0.gif" name="mins1"></img>")
document.write("<img src="0.gif" name="mins2"></img>")
document.write("<td><img src="col.gif"></img>")
document.write("<td><img src="0.gif" name="secs1"></img>")
document.write("<img src="0.gif" name="secs2"></img>")
document.write("<td><img src="am.gif" name="ampm"></img></table>")
//starting clock function
function showTime() {
now = new Date
ampmtime = now.getHours() - 12
thisHrs = "" + now.getHours() + ""
thisMin = "" + now.getMinutes() + ""
thisSec = "" + now.getSeconds() + ""
if (thisHrs > 9) {
  if (thisHrs >= 12) {
    document.ampm.src = "pm.gif"
             if (thisHrs==12)
                    newHrs=""+12+""
    if (thisHrs > 12) {
      newHrs = "" + ampmtime + ""
    }
    if (newHrs <= 9) {
      document.hrs1.src = dig[0]
      document.hrs2.src = dig[newHrs.charAt(0)]
    }
    if (newHrs > 9) {
      document.hrs1.src = dig[newHrs.charAt(0)]
      document.hrs2.src = dig[newHrs.charAt(1)]
    }
  }
  else {
    document.ampm.src = "am.gif"
    document.hrs1.src = dig[thisHrs.charAt(0)]
    document.hrs2.src = dig[thisHrs.charAt(1)]
  }
}
if (thisHrs <= 9) {
  document.ampm.src = "am.gif"
  if (thisHrs == 0) {
    document.hrs1.src = dig[1]
    document.hrs2.src = dig[2]
  }
  else {
    document.hrs1.src = dig[0]
    document.hrs2.src = dig[thisHrs.charAt(0)]
  }
}
if (thisMin > 9) {
  document.mins1.src = dig[thisMin.charAt(0)]
  document.mins2.src = dig[thisMin.charAt(1)]
}
if (thisMin <= 9) {
  document.mins1.src = dig[0]
  document.mins2.src = dig[thisMin.charAt(0)]
}
if (thisSec > 9) {
  document.secs1.src = dig[thisSec.charAt(0)]
  document.secs2.src = dig[thisSec.charAt(1)]
}
if (thisSec <= 9) {
  document.secs1.src = dig[0]
  document.secs2.src = dig[thisSec.charAt(0)]
}
setTimeout("showTime()",1000)
}
window.onload=showTime
// -->
</script>


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


Military Clock

//Military Clock - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link where you want the clock to appear on your page.
<script type="text/javascript" src="militaryclock.js"></script>
To edit, right click on the militaryclock.js file icon and choose edit.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free Position Military Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
background:#000000;
}
//-->
</style>
</head>
<body>
<script type="text/javascript">
//Military Clock - http://www.btinternet.ru/~kurt.grigg/javascript
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
(function(){
//Configure the clock colours and size here.
var fCol = "#666666"; //face colour.
var dCol = "#666666"; //dot colour.
var hCol = "#00ff00"; //hours colour.
var mCol = "#0000ff"; //minutes colour.
var sCol = "#ff0000"; //seconds colour.
var cHgt = 50;        //clock height. 
var cWdh = 50;        //clock width. 
//If used inside a table td, its minimum width should 
//be cWdh x 4. Netscape td"s do not auto expand! 
//End.
var y = cHgt * 2;
var x = cWdh * 2;
var h = 7;
var m = 5;
var s = 5;
var face24 = "06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 0 01 02 03 04 05";
face24 = face24.split(" ");
var n1 = face24.length;
var face12 = "15 20 25 30 35 40 45 50 55 0 5 10";
face12 = face12.split(" ");
var n2 = face12.length;
var e1 = 360/n1;
var e2 = 360/n2;
var e3 = 360/60;
var hHgt = cHgt/4;
var hWdh = cWdh/4;
var h24 = [];
var d1 = [];
var h12 = [];
var d2 = [];
var vh = [];
var vm = [];
var vs = [];
var pix = "px";
var idx = document.getElementsByTagName("div").length;
document.write("<div style="position:relative;width:"+((x*2))+"px;height:"+((y*2))+"px;">");
for (i=0; i < n1; i++){
document.write("<div id="hour24"+(idx+i)+"" style="position:absolute;top:0px;left:0px;width:15px;height:15px;"
+"text-align:center;font-family:verdana,arial,sans-serif;font-size:10px;color:"+fCol+"">"+face24[i]+"<\/div>");
document.write("<div id="dots1"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+dCol+""><\/div>");
}
for (i=0; i < n2; i++){
document.write("<div id="hour12"+(idx+i)+"" style="position:absolute;top:0px;left:0px;width:15px;height:15px;"
+"text-align:center;font-family:verdana,arial,sans-serif;font-size:10px;color:"+fCol+"">"+face12[i]+"<\/div>");
}
for (i=0; i < 12; i++){
document.write("<div id="dots2"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+dCol+""><\/div>");
}
for (i=0; i < h; i++){
document.write("<div id="H"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+hCol+""><\/div>");
}
for (i=0; i < m; i++){
document.write("<div id="M"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+mCol+""><\/div>");
}
for (i=0; i < s; i++){
document.write("<div id="S"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+sCol+""><\/div>");
}
document.write("<\/div>");
function MilClock(){
var time = new Date();
var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);
var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);
var hrs = time.getHours();
var hrOffSet = hrs - 6;
if (hrs < 6){ 
 hrOffSet = hrs+18;
}
var hr = Math.PI * (hrOffSet/12) + Math.PI * time.getMinutes()/720;
for (i=0; i < s; i++){
 vs[i].top = y + (i*hHgt) * Math.sin(sec) + pix;
 vs[i].left = x + (i*hWdh) * Math.cos(sec) + pix;
}
for (i=0; i < m; i++){
 vm[i].top = y + (i*hHgt) * Math.sin(min) + pix;
 vm[i].left = x + (i*hWdh) * Math.cos(min) + pix;
}
for (i=0; i < h; i++){
 vh[i].top = y + (i*hHgt) * Math.sin(hr) + pix;
 vh[i].left = x + (i*hWdh) * Math.cos(hr) + pix;
}
setTimeout(MilClock,100);
}

function init(){
for (i=0; i < n1; i++){
 h24[i] = document.getElementById("hour24"+(idx+i)).style;
 h24[i].top = y - 6 + cHgt * 1.7 * Math.sin(i*e1*Math.PI/180) + pix;
 h24[i].left = x - 6 + cWdh * 1.7 * Math.cos(i*e1*Math.PI/180) + pix;
 d1[i] = document.getElementById("dots1"+(idx+i)).style;
 d1[i].top = y + cHgt * 1.5 * Math.sin(i*e1*Math.PI/180) + pix;
 d1[i].left= x + cWdh * 1.5 * Math.cos(i*e1*Math.PI/180) + pix;
}
for (i=0; i < n2; i++){
 h12[i] = document.getElementById("hour12"+(idx+i)).style;
 h12[i].top = y - 6 + cHgt * 1.2 * Math.sin(i*e2*Math.PI/180) + pix;
 h12[i].left = x - 6 + cWdh * 1.2 * Math.cos(i*e2*Math.PI/180) + pix;
}
for (i=0; i < 12; i++){
 d2[i] = document.getElementById("dots2"+(idx+i)).style;
 d2[i].top = y + cHgt * Math.sin(i*e2*Math.PI/180) + pix;
 d2[i].left= x + cWdh * Math.cos(i*e2*Math.PI/180) + pix;
}
for (i=0; i < h; i++){
 vh[i] = document.getElementById("H"+(idx+i)).style;
}
for (i=0; i < m; i++){
 vm[i] = document.getElementById("M"+(idx+i)).style;
}
for (i=0; i < s; i++){
 vs[i] = document.getElementById("S"+(idx+i)).style;
}
MilClock();
}
if (window.addEventListener){
 window.addEventListener("load",init,false);
}
else if (window.attachEvent){
 window.attachEvent("onload",init);
} 
})();
}//End.
</script>

</body>
</html>



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">
    <!-- chrono.js -->
    <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>



Standard Clock

//Standard Analogue Clock - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link where you want the clock to appear on your page.
<script type="text/javascript" src="standardclock.js"></script>
To edit the colours, right click on the standardclock.js file icon and choose edit.
Make sure the standardclock.js file is in/uploaded to the same directory/folder as 
the web page using it!
The height & width of the clock are both 100 pixils - px. This should be the 
minimum h & w of any <td> or <div> as Netscape does not automatically expand 
them in standards mode!

*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Standard analogue Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
background-color : #000000;
}
//-->
</style>
</head>
<body>

<script type="text/javascript">
//Standard Analogue Clock - http://www.btinternet.ru/~kurt.grigg/javascript
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
(function(){
var fCol="#00ff00"; //face colour.
var dCol="#ffffff"; //dots colour.
var hCol="#ff0000"; //hours colour.
var mCol="#ffffff"; //minutes colour.
var sCol="#00ff00"; //seconds colour.
//Alter nothing below! Alignments will be lost!
var dial = "3 4 5 6 7 8 9 10 11 12 1 2";
dial = dial.split(" ");
var e = 360/dial.length;
var h = 3;
var m = 4;
var s = 5;
var y = 50;
var x = 50;
var cyx = 30/4;
var theDial = [];
var theDots = [];
var theHours = [];
var theMinutes = [];
var theSeconds = [];
var idx = document.getElementsByTagName("div").length;
var pix = "px";
document.write("<div style="position:relative;width:"+(x*2)+"px;height:"+(y*2)+"px">");
for (i=0; i < dial.length; i++){
document.write("<div id="F"+(idx+i)+"" style="position:absolute;top:0px;left:0px;width:15px;height:15px;"
+"font-family:arial,sans-serif;font-size:10px;color:"+fCol+";text-align:center">"+dial[i]+"<\/div>");
document.write("<div id="D"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+dCol+""><\/div>");
}
for (i=0; i < h; i++){
document.write("<div id="H"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+hCol+""><\/div>");
}
for (i=0; i < m; i++){
document.write("<div id="M"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+mCol+""><\/div>");
}
for (i=0; i < s; i++){
document.write("<div id="S"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:2px;height:2px;font-size:2px;background-color:"+sCol+""><\/div>");
}
document.write("<\/div>");

function clock(){
var time = new Date();
var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);
var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);
var hrs = time.getHours();
if (hrs > 12){
 hrs -= 12;
}
var hrOffSet = hrs - 3;
if (hrs < 3){ 
 hrOffSet = hrs+9;
}
var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;
for (i=0; i < s; i++){
 theSeconds[i].top = y + (i*cyx) * Math.sin(sec) + pix;
 theSeconds[i].left = x + (i*cyx) * Math.cos(sec) + pix;
}
for (i=0; i < m; i++){
 theMinutes[i].top = y + (i*cyx) * Math.sin(min) + pix;
 theMinutes[i].left = x + (i*cyx) * Math.cos(min) + pix;
}
for (i=0; i < h; i++){
 theHours[i].top = y + (i*cyx) * Math.sin(hr) + pix;
 theHours[i].left = x + (i*cyx) * Math.cos(hr) + pix;
}
setTimeout(clock,100);
}


function init(){
for (i=0; i < dial.length; i++){
 theDial[i] = document.getElementById("F"+(idx+i)).style;
 theDial[i].top = y-6 + 30 * 1.4  * Math.sin(i*e*Math.PI/180) + pix;
 theDial[i].left = x-6 + 30 * 1.4 * Math.cos(i*e*Math.PI/180) + pix;
 theDots[i] = document.getElementById("D"+(idx+i)).style;
 theDots[i].top = y + 30 * Math.sin(e*i*Math.PI/180) + pix;
 theDots[i].left= x + 30 * Math.cos(e*i*Math.PI/180) + pix;
}
for (i=0; i < h; i++){
 theHours[i] = document.getElementById("H"+(idx+i)).style;
}
for (i=0; i < m; i++){
 theMinutes[i] = document.getElementById("M"+(idx+i)).style;
}
for (i=0; i < s; i++){
 theSeconds[i] = document.getElementById("S"+(idx+i)).style;
}
clock();
}
if (window.addEventListener){
 window.addEventListener("load",init,false);
}
else if (window.attachEvent){
 window.attachEvent("onload",init);
} 
})();
}//End.
</script>

</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/GUI_Components/Clock&oldid=4137»