« »

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.

Label: DHTML analog clock II

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

<script language="JavaScript1.2">
<!--
/*
DHTML analog clock II (By Erik Arvidsson at http://webfx.eae.net)
Slight modifications to script made by Dynamicdrive.com
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//specify clock size in pixels
var clocksize=135

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

Copy All x2

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