JavaScript DHTML/GUI Components/Clock

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

Animation: clock

   <source lang="html4strict">

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

</style>

2: The on off button:

  Paste where you want it to appear in the page.

<script type="text/javascript">

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

</style> </head> <body>


<script type="text/javascript">

</script>


<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("
"+todaysDate[i]+"<\/div>");

} for (i=0; i < cflen; i++){

document.write("
"+cfa[i]+"<\/div>");

} for (i=0; i < hlen; i++){

document.write("
"+hourfin[i]+"<\/div>");

} for (i=0; i < mlen; i++){

document.write("
"+minfin[i]+"<\/div>");

} for (i=0; i < slen; i++){

document.write("
"+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>

      </source>
   
  


Calendar with Clock

   <source lang="html4strict">

<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="\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
<img src="./dynapiexamples/images/edge.tplt.gif" border=0 width="10" height="10" /><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0 /><img height=10 src="./dynapiexamples/images/edge.tprt.gif" width="10" border="0" />
<img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0>\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n <img border=0 src="./dynapiexamples/images/htmlcomponents.gif" width="285" height="42">
\n {@hmenu}\n
\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n
{@hbtn1}
{@hbtn2}

\n {@hclk}
\n
{@hcal}
\n
{@lyr1}
\n DynAPI |  {@hlink}
\n
\n
<img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0>
<img height=10 src="./dynapiexamples/images/edge.bmlt.gif" width=10 border=0><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0><img height=10 src="./dynapiexamples/images/edge.bmrt.gif" width=10 border=0>
";

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("Date is "+dt+"");
   }
 }

}); //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>

      </source>
   
  

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


Digital Clock

   <source lang="html4strict">

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

      </source>
   
  

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


Fancy Clock

   <source lang="html4strict">

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

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

" +"
"

+"<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>"); d.write("
\!<\/div>");

for (var i = 0; i < n; i++){

d.write("
"+face[i]+"<\/div>");

} for (var i = 0; i < n; i++){

d.write("
<\/div>");

} for (var i = 0; i < h; i++){

d.write("
<\/div>");

} for (var i = 0; i < m; i++){

d.write("
<\/div>");

} for (var i = 0; i < s; i++){

d.write("
<\/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>

      </source>
   
  


JavaScript Clock

   <source lang="html4strict">

<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

{@fld}
",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>

      </source>
   
  

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


JavaScript Clock (2)

   <source lang="html4strict">

<html> <head> <title>Java Script Clock</title>


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

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

      </source>
   
  

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


Live image clock

   <source lang="html4strict">

<script language="JavaScript1.1">

</script>

      </source>
   
  

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


Military Clock

   <source lang="html4strict">

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

</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("
");

for (i=0; i < n1; i++){

document.write("
"+face24[i]+"<\/div>"); document.write("
<\/div>");

} for (i=0; i < n2; i++){

document.write("
"+face12[i]+"<\/div>");

} for (i=0; i < 12; i++){

document.write("
<\/div>");

} for (i=0; i < h; i++){

document.write("
<\/div>");

} for (i=0; i < m; i++){

document.write("
<\/div>");

} for (i=0; i < s; i++){

document.write("
<\/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>

      </source>
   
  


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


Standard Clock

   <source lang="html4strict">

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

</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("
");

for (i=0; i < dial.length; i++){

document.write("
"+dial[i]+"<\/div>"); document.write("
<\/div>");

} for (i=0; i < h; i++){

document.write("
<\/div>");

} for (i=0; i < m; i++){

document.write("
<\/div>");

} for (i=0; i < s; i++){

document.write("
<\/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>

</source>