« »

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

29/01/2007
Erik Arvidsson [more]
7,743
0
8
0
4.71 KBytes

JavaScript DHTML analog clock II - Language: English

2.8/5 8 votes / 7,743 previews / 0 comment 29/01/2007 This JavaScript harnesses the power of VML in IE 5 to create a live analog clock. VML, or Vec...JavaScript DHTML analog clock II - DHTML analog clock II - Language: English

Cao Phong[2] TuanAnas famer_love_rock p3_suong

Let's be first member to do this

p3_suong

DHTML analog clock script

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web