Analog Watch Clock - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Analog Watch Clock		[View Sample]

It may not be quite a Rolex. However it's the first full-functional design watch written in javascript. Find out how it works (only four gif-images!!!). Fast loading.


Insert into <HEAD>
<SCRIPT LANGUAGE = "JavaScript"> var clipTop=0 var clipBottom=clipTop+60 var clipLeft var clipRight var isNS if (document.layers) { (isNS=true) } var HIDDEN = (isNS) ? 'hide' : 'hidden'; var VISIBLE = (isNS) ? 'show' : 'visible'; var imgSeconds var imgMinutes var imgHours var imgClock var textDate var textDay var textLink var clipHours="" var clipMinutes="" var clipSeconds="" var startLeft=-5 var startTop=85 var tunePosHour =-2 function initObjects() { if (document.all) { imgSeconds = document.all.imgSeconds.style imgMinutes = document.all.imgMinutes.style imgHours = document.all.imgHours.style imgClock = document.all.imgClock.style textDate = document.all.textDate.style textDay = document.all.textDay.style textLink = document.all.textLink.style startLeft=-3 startTop=89 imgHours.posTop=startTop imgMinutes.posTop=startTop imgSeconds.posTop=startTop textDate.posTop = 111 textDate.posLeft = 75 textDay.posTop = 111 textDay.posLeft = 41 textLink.posTop = 220 textLink.posLeft = -9 imgSeconds.visibility=VISIBLE imgMinutes.visibility=VISIBLE imgHours.visibility=VISIBLE imgClock.visibility=VISIBLE textDate.visibility=VISIBLE textDay.visibility=VISIBLE textLink.visibility=VISIBLE tickIE() } if (document.layers) { imgSeconds = document.imgSeconds imgMinutes = document.imgMinutes imgHours = document.imgHours imgClock = document.imgClock textDate = document.textDate textDay = document.textDay textLink = document.textLink startLeft=-1 startTop=80 imgHours.top=startTop imgMinutes.top=startTop imgSeconds.top=startTop textDate.top = 104 textDate.left = 75 textDay.top = 104 textDay.left = 40 textLink.top = 220 textLink.left = -10 imgSeconds.visibility=VISIBLE imgMinutes.visibility=VISIBLE imgHours.visibility=VISIBLE imgClock.visibility=VISIBLE textDate.visibility=VISIBLE textDay.visibility=VISIBLE textLink.visibility=VISIBLE tickNS() } } function tickIE() { var now = new Date() var nowHours = now.getHours() var nowMinutes = now.getMinutes() var nowSeconds = now.getSeconds() if (nowHours >= 12) {nowHours=nowHours-12} imgHours.posLeft=-(nowHours605+((Math.round(nowMinutes/12))60)+startLeft+tunePosHour) clipLeft = -(imgHours.posLeft)+30 clipRight= clipLeft+56 clipHours ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")" imgHours.clip=clipHours imgMinutes.posLeft=-((nowMinutes)60+startLeft) clipLeft = -(imgMinutes.posLeft)+30 clipRight= clipLeft+56 clipMinutes ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")" imgMinutes.clip=clipMinutes imgSeconds.posLeft=-((nowSeconds)60+startLeft) clipLeft = -(imgSeconds.posLeft)+35 clipRight= clipLeft+56 clipSeconds ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")" imgSeconds.clip=clipSeconds var runClock = setTimeout("tickIE()", 100); } function tickNS() { var now = new Date() var nowHours = now.getHours() var nowMinutes = now.getMinutes() var nowSeconds = now.getSeconds() if (nowHours >= 12) {nowHours=nowHours-12} imgHours.left=-(nowHours605+((Math.round(nowMinutes/12))60)+startLeft+tunePosHour+2) clipLeft = -(imgHours.left)+30 clipRight= clipLeft+56 imgHours.clip.left = clipLeft imgHours.clip.right = clipRight imgHours.clip.top = clipTop imgHours.clip.bottom = clipBottom imgMinutes.left=-((nowMinutes)60+startLeft) clipLeft = -(imgMinutes.left)+30 clipRight= clipLeft+56 imgMinutes.clip.left = clipLeft imgMinutes.clip.right = clipRight imgMinutes.clip.top = clipTop imgMinutes.clip.bottom = clipBottom imgSeconds.left=-((nowSeconds)60+startLeft) clipLeft = -(imgSeconds.left)+35 clipRight= clipLeft+56 imgSeconds.clip.left = clipLeft imgSeconds.clip.right = clipRight imgSeconds.clip.top = clipTop imgSeconds.clip.bottom = clipBottom var runClock = setTimeout("tickNS()", 100); } </script> <STYLE> .imgall { position: absolute; visibility: hidden; } </STYLE>

Insert into <BODY>
<BODY onLoad="initObjects()"> <DIV ID = "imgClock" CLASS = "imgall"><img src="clock2.jpg"></DIV> <SCRIPT LANGUAGE = "JavaScript"> var heute = new Date() var wochentag = heute.getDay() var heuteDatum = heute.getDate() if (wochentag==0) { wochentag = "sun" } else if (wochentag==1) { wochentag = "mon" } else if (wochentag==2) { wochentag = "tue" } else if (wochentag==3) { wochentag = "wed" } else if (wochentag==4) { wochentag = "thu" } else if (wochentag==5) { wochentag = "fri" } else if (wochentag==6) { wochentag = "sam" } document.write('<DIV ID = "textDate" CLASS = "imgall"><font size=1>'+heuteDatum+'</font></DIV>') document.write('<DIV ID = "textDay" CLASS = "imgall"><font size=1>'+wochentag+'</font></DIV>') </script> <DIV ID = "imgHours" CLASS = "imgall"><img src="hours2.gif"></DIV> <DIV ID = "imgMinutes" CLASS = "imgall"><img src="minutes2.gif"></DIV> <DIV ID = "imgSeconds" CLASS = "imgall"><img src="seconds2.gif"></DIV> <DIV ID = "textLink" CLASS = "imgall"> </DIV>

Other Options