CSS3 Analog clock - No Image used

By Luckychap on Jul 23rd, 2011 11:55 am

I have seen many beautiful clocks using images and and canvas and flash. So I thought of developing one with pure HTML,CSS3 and javascript, no images at all. This clock can be completely design using CSS.

A brief description of Javascript used:-

'AnalogClock' is the name of the class which creates a clock. You can simply create as many instance of the clock on page (keeping in mind the performance).
This how you can create a clock:-

1. Include all the css in the page
2. Then create a container for the clock on page

<div id="aclock"></div>

3. Create an instance of 'AnalogClock' in javascript

new AnalogClock({parentId: 'aclock', milliSecond: true});

Thats it!! You can refer to the snippet.

Hope you all will like it. Write me at [email]vivek_kumar_bt@yhaoo.co.in[/email]

<html>
	<head>
		<title>Analog clock Css3</title>
		
		<style>
			#clock {
				position: absolute;
				width: 600px;
				height:600px;
				top: 100px;
				left: 300px;
			}
			.aclock_container {
				position: absolute;
				width: 98%;
				height: 98%;
				top: 1%;
				left: 1%;			
			}
			.aclock_clock_container {
				position: absolute;
				width: 100%;
				height: 100%;
				top: -10px;
				left: -10px;
				-webkit-border-radius: 50%;				
				border: 10px solid blue;
			}
			.aclock_dial {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0%;
				left: 0%;
				background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(133,247,239,0) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(133,247,239,0))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* Opera11.10+ */
				background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* IE10+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0085f7ef',GradientType=1 ); /* IE6-9 */
				background: linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* W3C */
				-webkit-border-radius: 50%;
			}
			.aclock_small_mark {
				position: absolute;
				width: 1%;
				height: 2%;
				top: 0%;
				left: 49.5%;
				background: black;	
			}
			.aclock_big_mark {
				position: absolute;
				width: 2%;
				height: 3%;
				top: 0%;
				left: 49%;
				background: red;	
			}
			.aclock_hand_container {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0%;
				left: 0%;
			}
			.aclock_hour_hand {
				position: absolute;
				width: 3%;
				height: 35%;
				bottom: 45%;
				left: 48.5%;
				background: #222;
			}
			.aclock_minute_hand {
				position: absolute;
				width: 2%;
				height: 45%;
				bottom: 45%;
				left: 49%;
				background: #111;	
			}
			.aclock_second_hand {
				position: absolute;
				width: 1%;
				height: 55%;
				bottom: 40%;
				left: 49.5%;
				background: red;	
			}
			.aclock_milli_hand {
				position: absolute;
				width: 1%;
				height: 25%;
				bottom: 45%;
				left: 49.5%;
				background: red;	
			}
			.aclock_screw {
				position: absolute;
				width: 5%;
				height: 5%;
				bottom: 47.5%;
				left: 47.5%;
				-webkit-border-radius: 50%;
				background: red;
			}
		</style>
		
		<script>
			var AnalogClock = function(conf) {
				if(!conf.parentId) return;
				
				this.parent = document.getElementById(conf.parentId);
				if(!this.parent) return;				
				
				this.milliSecond = !!conf.milliSecond;
				
				this.refreshRate = 1000;
				if(this.milliSecond) this.refreshRate = 1;
				
				this.buildHTML();
				this.start();
			};
			
			AnalogClock.prototype.buildHTML = function() {
				this.container = build(this.parent, 'aclock_container');
				this.clockContainer = build(this.container, 'aclock_clock_container');
				
				for(var i = 0; i < 360; i += 6) {
					if(!(i%5)) {
						var markContainer = build(this.container, 'aclock_hand_container');
						build(markContainer, 'aclock_big_mark');
						this.rotate(markContainer, i);
					} else {
						var markContainer = build(this.container, 'aclock_hand_container');
						build(markContainer, 'aclock_small_mark');
						this.rotate(markContainer, i);
					}
				}
				
				this.hourContainer = build(this.container, 'aclock_hand_container');
				this.hourHand = build(this.hourContainer, 'aclock_hour_hand');
				this.minuteContainer = build(this.container, 'aclock_hand_container');
				this.minuteHand = build(this.minuteContainer, 'aclock_minute_hand');
				this.secondContainer = build(this.container, 'aclock_hand_container');
				this.secondHand = build(this.secondContainer, 'aclock_second_hand');
				
				if(this.milliSecond) {
					this.milliContainer = build(this.container, 'aclock_hand_container');
					this.milliHand = build(this.milliContainer, 'aclock_milli_hand');
				}
				
				this.screw = build(this.container, 'aclock_screw');
				
				this.dial = build(this.container, 'aclock_dial');
				
				function build(parent, css) {
					if(!parent) return;
					
					var div = document.createElement('div');
					if(css) div.className = css;
					
					parent.appendChild(div);
					return div;
				}
			};
			
			AnalogClock.prototype.start = function() {
				var that = this;
				var refreshRate = 1000;
				setInterval(function() {
					var now = new Date();
					var h = now.getHours()%12;
					var m = now.getMinutes();
					var s = now.getSeconds();
				
					if(that.milliSecond) { 
						var milli = now.getMilliseconds();
						that.rotate(that.milliContainer, (360/1000)*milli);
					}
					
					that.rotate(that.hourContainer,  h*30 + (m/2));
					that.rotate(that.minuteContainer, 6*m);
					that.rotate(that.secondContainer, 6*s);
				}, this.refreshRate);
			};
			
			AnalogClock.prototype.rotate = function(hand, angle) {
				hand.style['-webkit-transform'] =  'rotate('+angle+'deg)';
			};
			
			function init() {
				var clock = new AnalogClock({parentId: 'clock', milliSecond: true});
			}
 			
		</script>
	</head>
	
	<body onload="init();">
		<div id="clock"></div>
	</body>
</html>

10 Months Ago

Here is updated version also works on FireFox. Use this ignore previous one. Sorry I missed updated version.

<html>
	<head>
		<title>Analog clock Css3</title>
		
		<style>
			#clock {
				position: absolute;
				width: 600px;
				height:600px;
				top: 100px;
				left: 300px;
			}
			.aclock_container {
				position: absolute;
				width: 98%;
				height: 98%;
				top: 1%;
				left: 1%;			
			}
			.aclock_clock_container {
				position: absolute;
				width: 100%;
				height: 100%;
				top: -10px;
				left: -10px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border: 10px solid blue;
			}
			.aclock_dial {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0%;
				left: 0%;
				background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(133,247,239,0) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(133,247,239,0))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* Opera11.10+ */
				background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* IE10+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0085f7ef',GradientType=1 ); /* IE6-9 */
				background: linear-gradient(left, rgba(30,87,153,1) 0%,rgba(133,247,239,0) 100%); /* W3C */
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
			}
			.aclock_small_mark {
				position: absolute;
				width: 1%;
				height: 2%;
				top: 0%;
				left: 49.5%;
				background: black;	
			}
			.aclock_big_mark {
				position: absolute;
				width: 2%;
				height: 3%;
				top: 0%;
				left: 49%;
				background: red;	
			}
			.aclock_hand_container {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0%;
				left: 0%;
			}
			.aclock_hour_hand {
				position: absolute;
				width: 3%;
				height: 35%;
				bottom: 45%;
				left: 48.5%;
				background: #222;
			}
			.aclock_minute_hand {
				position: absolute;
				width: 2%;
				height: 45%;
				bottom: 45%;
				left: 49%;
				background: #111;	
			}
			.aclock_second_hand {
				position: absolute;
				width: 1%;
				height: 55%;
				bottom: 40%;
				left: 49.5%;
				background: red;	
			}
			.aclock_milli_hand {
				position: absolute;
				width: 1%;
				height: 25%;
				bottom: 45%;
				left: 49.5%;
				background: red;	
			}
			.aclock_screw {
				position: absolute;
				width: 5%;
				height: 5%;
				bottom: 47.5%;
				left: 47.5%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				background: red;
			}
		</style>
		
		<script>
			var AnalogClock = function(conf) {
				if(!conf.parentId) return;
				
				this.parent = document.getElementById(conf.parentId);
				if(!this.parent) return;				
				
				this.milliSecond = !!conf.milliSecond;
				
				this.refreshRate = 1000;
				if(this.milliSecond) this.refreshRate = 1;
				
				this.buildHTML();
				this.start();
			};
			
			AnalogClock.prototype.buildHTML = function() {
				this.container = build(this.parent, 'aclock_container');
				this.clockContainer = build(this.container, 'aclock_clock_container');
				
				for(var i = 0; i < 360; i += 6) {
					if(!(i%5)) {
						var markContainer = build(this.container, 'aclock_hand_container');
						build(markContainer, 'aclock_big_mark');
						this.rotate(markContainer, i);
					} else {
						var markContainer = build(this.container, 'aclock_hand_container');
						build(markContainer, 'aclock_small_mark');
						this.rotate(markContainer, i);
					}
				}
				
				this.hourContainer = build(this.container, 'aclock_hand_container');
				this.hourHand = build(this.hourContainer, 'aclock_hour_hand');
				this.minuteContainer = build(this.container, 'aclock_hand_container');
				this.minuteHand = build(this.minuteContainer, 'aclock_minute_hand');
				this.secondContainer = build(this.container, 'aclock_hand_container');
				this.secondHand = build(this.secondContainer, 'aclock_second_hand');
				
				if(this.milliSecond) {
					this.milliContainer = build(this.container, 'aclock_hand_container');
					this.milliHand = build(this.milliContainer, 'aclock_milli_hand');
				}
				
				this.screw = build(this.container, 'aclock_screw');
				
				this.dial = build(this.container, 'aclock_dial');
				
				function build(parent, css) {
					if(!parent) return;
					
					var div = document.createElement('div');
					if(css) div.className = css;
					
					parent.appendChild(div);
					return div;
				}
			};
			
			AnalogClock.prototype.start = function() {
				var that = this;
				var refreshRate = 1000;
				setInterval(function() {
					var now = new Date();
					var h = now.getHours()%12;
					var m = now.getMinutes();
					var s = now.getSeconds();
				
					if(that.milliSecond) { 
						var milli = now.getMilliseconds();
						that.rotate(that.milliContainer, (360/1000)*milli);
					}
					
					that.rotate(that.hourContainer,  h*30 + (m/2));
					that.rotate(that.minuteContainer, 6*m);
					that.rotate(that.secondContainer, 6*s);
				}, this.refreshRate);
			};
			
			AnalogClock.prototype.rotate = function(hand, angle) {
				hand.style['-webkit-transform'] =  'rotate('+angle+'deg)';
				hand.style['MozTransform'] =  'rotate('+angle+'deg)';
				hand.style['-moz-transform'] =  'rotate('+angle+'deg)';
				hand.style['-ms-transform'] =  'rotate('+angle+'deg)';
				hand.style.webkitTransform =  'rotate('+angle+'deg)';
			};
			
			function init() {
				var clock = new AnalogClock({parentId: 'clock', milliSecond: true});
			}
 			
		</script>
	</head>
	
	<body onload="init();">
		<div id="clock"></div>
	</body>
</html>

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

This article has been dead for over three months

You