Dynamic Drive DHTML Scripts- DHTML analog clock

New Revised CSS Library Forums Web Tools

DHTML analog clock II

Author: Erik Arvidsson | Homepage

Note: Questions regarding this script should be posted on the author's message board.

Description: This script 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.

Demo:

Directions

Step 1: Insert the below into the <HEAD> section of your page:

Select All
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> <object id="VMLRender" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E"> </object> <style>  </style> <script language="JavaScript1.2">  </script>

Step 2: Add the following to the <BODY> where you wish the clock to appear:

Select All
<v:group id="clock" coordsize="100 100" style="position: relative;"> <v:oval style="width: 100%; height: 100%"> <v:stroke weight="10px" color="gray"/>  </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>

Both the size and color of the clock can be altered; please modify variable "clocksize" of Step 1 and color attribute of Step 2 to accomplish this, respectively.