Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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=-(nowHours*60*5+((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=-(nowHours*60*5+((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