Full version: jsB@nk » Time » Clock » DHTML analog clock II
URL: https://www.javascriptbank.com/dhtml-analog-clock-ii.html
This JavaScript harnesses the power of VML in IE 5 to create a live analog clock. VML, or Vector Graphics, is considered a subset of the DHTML technology, and allows developers to render and animate simple shapes and objects using code. In the below case, it probably also has the effect of rendering people speechless. Impressive script indeed.
Full version: jsB@nk » Time » Clock » DHTML analog clock II
URL: https://www.javascriptbank.com/dhtml-analog-clock-ii.html
<style><!--v\:* { behavior: url(#VMLRender); }--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript1.2"><!--/*DHTML analog clock II (By Erik Arvidsson at http://webfx.eae.net)Slight modifications to script made by Dynamicdrive.comPermission granted to Dynamicdrive.com to include script in archiveFor this and 100's more DHTML scripts, visit http://dynamicdrive.com*///specify clock size in pixelsvar clocksize=135function updatePointers() {var now = new Date();secondsPointer.style.rotation = now.getSeconds() * 6;minutesPointer.style.rotation = now.getMinutes() * 6 + now.getSeconds() / 10;hoursPointer.style.rotation = now.getHours() * 30 + now.getMinutes() / 2;}if (document.all&&window.print){window.attachEvent("onload", initVMLClock);window.attachEvent("onresize", resizeObjects);}function initVMLClock() {resizeObjects();updatePointers();window.setInterval("updatePointers()", 1000);}function resizeObjects() {var size = Math.min(clocksize, clocksize);clock.style.pixelWidth = size - 2*(size * 0.045);clock.style.pixelHeight = size - 2*(size * 0.045);clock.childNodes.item(0).childNodes.item(0).weight = size * 0.01;secondsPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.001;minutesPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.002;hoursPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.004;}function toggle(sId) {var el = document.getElementById(sId);el.style.display = (el.style.display == "none") ? "block" : "none";}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><v:group id="clock" coordsize="100 100" style="position: relative;"><v:oval style="width: 100%; height: 100%"><v:stroke weight="10px" color="gray"/><!-- I removed this gradient fill to match the WebFX color theme<v:fill type="gradient" color="white" color2="#eeeeff" angle="225deg"/> --></v:oval><v:group id="secondsPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,5"><v:stroke weight="2px" endcap="round" color="navy"/></v:line></v:group><v:group id="minutesPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,8"><v:stroke weight="4px" endcap="round" color="navy"/></v:line></v:group><v:group id="hoursPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"><v:line from="50,50" to="50,18"><v:stroke weight="7px" endcap="round" color="navy"/></v:line></v:group></v:group><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->