A Colorful Clock With CSS & jQuery

A Colorful Clock With CSS & jQuery

The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months.

And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year.

This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).

Go ahead, download the demo files and continue with step one.

Step 1 – XHTML

As usual, we start with the XHTML markup. The difference is, that the XHTML is not contained in demo.html, but is dynamically inserted into the page by jQuery (well there is some markup left there after all we need at least one container div for the clock to be inserted in).

This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds).

Lets take a look at the XHTML that is inserted by jQuery:

jquery.tzineClock.js

<!-- The first class (green in this case) is assigned dynamically -->
<div class="green clock"</div>

<!-- This div holds the value of the unit monitored - seconds, minutes or hours -->
<div class="display"></div>

<!-- A black area that hides the underlying background -->
<div class="front left"></div>

<!-- The left part of the background: -->
<div class="rotate left">
<div class="bg left"></div>
</div>

<!-- The right part of the background: -->
<div class="rotate right">
<div class="bg right"></div>
</div>

</div>

This code is contained in jquery.tzineClock/jquery.tzineClock.js. It is generated three times – once for the hours, minutes and seconds. Those are later animated and updated every second, as you’ll see in a moment.

There are three classes that are assigned to the topmost container during the generation process – green, blue and orange. Just by assigning one of those classes, we change the color of the dial.

Lets continue with the next step.

A Colorful jQuery & CSS Clock

A Colorful jQuery & CSS Clock

Step 2 – CSS

Before our style sheets can have any effect on the page, we have to include them in the head section of the file:

demo.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />

Those lines import styles.css and jquery.tzineClock.css in the page. The first one styles the demo page, and the second – the colorful dials (it is part of the plugin).

We can now take a closer look at the CSS rules.

styles.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	color:#dddddd;
	font-size:13px;
	background: #302b23;
	font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
	margin:40px auto;
	height:200px;
	border:1px solid #111111;
	width:600px;
}

Those few lines are all that is needed to style the demo page. We first implement a simple CSS reset, which will insure that the elements on the page look the same across the different browsers.

Later we style the body of the page and finally the fancyClock div, in which we will later insert the three dials.

jquery.tzineClock.css

.clock{
	/* The .clock div. Created dynamically by jQuery */
	background-color:#252525;
	height:200px;
	width:200px;
	position:relative;
	overflow:hidden;
	float:left;
}

.clock .rotate{
	/* There are two .rotate divs - one for each half of the background */
	position:absolute;
	width:200px;
	height:200px;
	top:0;
	left:0;
}

.rotate.right{
	display:none;
	z-index:11;
}

.clock .bg, .clock .front{
	width:100px;
	height:200px;
	background-color:#252525;
	position:absolute;
	top:0;
}

.clock .display{
	/* Holds the number of seconds, minutes or hours respectfully */
	position:absolute;
	width:200px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	z-index:20;
	color:#F5F5F5;
	font-size:60px;
	text-align:center;
	top:65px;
	left:0;

	/* CSS3 text shadow: */
	text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
	left:0;
	z-index:10;
}

jquery.tzineClock.css is a part of our plugin (alongside jquery.tzineClock.js) and it styles the colorful dials themselves.

One of the more interesting moments is the use of individual rules that style the colors of the dials, as I mentioned in step one.

You can learn more about the animation from the illustration below:

The animation explained

The animation explained

Step 3 – jQuery

Moving all the JavaScript to the plugin makes it really easy to reuse the code and at the same time enables us to leverage the power of jQuery’s selectors and methods.

To be able to use the jQuery library, we first need to include a couple of scripts in the page:

demo.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script>
<script type="text/javascript" src="script.js"></script>

The first file is the library itself, included from Google’s CDN, later we have the plug-in and lastly the script file that runs the demo.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('#fancyClock').tzineClock();

});

If you’ve followed some of our previous tutorials, you are probably expecting to see some 50+ lines of code here, but this time our scripts file contains only one line of code – a call to our plug-in.

This makes it extremely easy to include the code in an existing site (which is the purpose of jquery plugins in the first place).

Lets dig a little deeper into the plugin:

jquery.tzineClock.js – Part 1

(function($){
	// A global object used by the functions of the plug-in:
	var gVars = {};

	// Extending the jQuery core:

	$.fn.tzineClock = function(opts){

		// "this" contains the elements that were selected when calling the plugin: 		$('elements').tzineClock();
		// If the selector returned more than one element, we use the first one:
		var container = this.eq(0);
		if(!container)
		{
			try{
				console.log("Invalid selector!");
			} catch(e){}

			return false;
		}

		if(!opts) opts = {};

		var defaults = {
			/* Additional options will be added in future versions of the plugin. */
		};

		/* Merging the provided options with the default ones (will be used in future versions of the plugin): */

		$.each(defaults,function(k,v){
			opts[k] = opts[k] || defaults[k];
		});

		// Calling the setUp function and passing the container,
		// will be available to the setUp function as "this":

		setUp.call(container);

		return this;
	}

	function setUp()
	{
		// The colors of the dials:
		var colors = ['orange','blue','green'];

		var tmp;
		for(var i=0;i<3;i++)
		{
			// Creating a new element and setting the color as a class name:

			tmp = $('<div>').attr('class',colors[i]+' clock').html(
				'<div class="display"></div>'+
				'<div class="front left"></div>'+
				'<div class="rotate left">'+
				'<div class="bg left"></div>'+
				'</div>'+
				'<div class="rotate right">'+
				'<div class="bg right"></div>'+
				'</div>'
			);

			// Appending to the fancyClock container:
			$(this).append(tmp);

			// Assigning some of the elements as variables for speed:
			tmp.rotateLeft = tmp.find('.rotate.left');
			tmp.rotateRight = tmp.find('.rotate.right');
			tmp.display = tmp.find('.display');

			// Adding the dial as a global variable. Will be available as gVars.colorName
			gVars[colors[i]] = tmp;
		}

		// Setting up a interval, executed every 1000 milliseconds:
		setInterval(function(){

			var currentTime = new Date();
			var h = currentTime.getHours();
			var m = currentTime.getMinutes();
			var s = currentTime.getSeconds();

			animation(gVars.green, s, 60);
			animation(gVars.blue, m, 60);
			animation(gVars.orange, h, 24);
		},1000);
	}

Making a plug-in for jQuery comes down to defining a custom function through the jQuery.fn method. This way your function is available on any elements that you normally use jQuery on.

For example, in script.js we select the div width an id of fancyClock and use the tzineClock() method on it: $(‘#fancyClock’).tzineClock();. The elements we selected are later passed to the tzineClock function and are available through the “this” property.

I have left place for future improvements of the plugin, like passing configuration options for the dimensions of the clock, color themes etc. Those will however be implemented in future releases of the plugin.

Because there might be more than one element selected, we extract only the first one of the set with the eq(0) method. Later we have the setUp() function that inserts the markup for the dials and sets up the interval which will update the figures every second.

jquery.tzineClock.js – Part 2

	function animation(clock, current, total)
	{
		// Calculating the current angle:
		var angle = (360/total)*(current+1);

		var element;

		if(current==0)
		{
			// Hiding the right half of the background:
			clock.rotateRight.hide();

			// Resetting the rotation of the left part:
			rotateElement(clock.rotateLeft,0);
		}

		if(angle<=180)
		{
			// The left part is rotated, and the right is currently hidden:
			element = clock.rotateLeft;
		}
		else
		{
			// The first part of the rotation has completed, so we start rotating the right part:
			clock.rotateRight.show();
			clock.rotateLeft.show();

			rotateElement(clock.rotateLeft,180);
			element = clock.rotateRight;

			angle = angle-180;
		}

		rotateElement(element,angle);

		// Setting the text inside of the display element, inserting a leading zero if needed:
		clock.display.html(current<10?'0'+current:current);
	}

	function rotateElement(element,angle)
	{
		// Rotating the element, depending on the browser:
		var rotate = 'rotate('+angle+'deg)';

		if(element.css('MozTransform')!=undefined)
			element.css('MozTransform',rotate);

		else if(element.css('WebkitTransform')!=undefined)
			element.css('WebkitTransform',rotate);

		// A version for internet explorer using filters, works but is a bit buggy (no surprise here):

		else if(element.css("filter")!=undefined)
		{
			var cos = Math.cos(Math.PI * 2 / 360 * angle);
			var sin = Math.sin(Math.PI * 2 / 360 * angle);

			element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
			element.css("left",-Math.floor((element.width()-200)/2));
			element.css("top",-Math.floor((element.height()-200)/2));
		}
	}
})(jQuery)

The last two of the functions used by the plug-in are animation and rotateElement. The first one updates the dials according to the value passed (we also pass a parameter with the maximum value so that the function can calculate the rotation).

The next function is the one that actually rotates the passed element. The rotation works only for Firefox, Safari, Chrome and IE6+. Internet Explorer does not support the CSS3 rotation used by the other browsers, but provides a proprietary filter property which allows for a similar transformation.

With this our colorful jQuery clock is complete!

Conclusion

Today we created a colorful clock with the help of CSS, jQuery and our first plug-in. You are free to use the code given here in your own projects. As a bonus, I’ve included the PSD file that I used to make the backgrounds, so you can easily create new colors and designs for the dials.

What do you think? How would you improve this code?

Join our newsletter and get our PSDs!19,475 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

86 Comments

  1. Lam Nguyen says:

    That's not just a colorful, that would be great idea and awesome tutorial and demonstration. And ... I dugg it! Great job :)

  2. Your tutorials are really great. I don't know much about jquery and reading your tutorials definitely help.

    It would be cool if you can start a jquery series for beginners or noob's like me.

  3. Also, is that a plugin that you use to layout the code like that?

    1. S.N. Migos says:

      Indeed it is. It's SyntaxHighlighter by Alex Gorbatchev.

      And this coding is plain fantastic. I haven't read much here, yet, but the few articles I've seen are top notch.

      Keep up the good work!

  4. Jason says:

    Very cool. And just in time for a New Year Eve countdown!

  5. says:

    A great tut, will use it quite soon.
    Will let you know at the time...

    Many thanks mate, you're making webdesign much easier !

  6. mupet says:

    This is very cool, amazing....

  7. Vipin says:

    JUST AMAZING!!!
    Great tutorial and many thanks to jquery..

  8. medokin says:

    I'm using you tuts so often for my work.. Where is the donate Button?

  9. wespai says:

    thx collect it to

    ajax.wespai.com

  10. It is the best clock . I like it. you are the one.

  11. arnold says:

    you are genius, going to check this out!
    Its cool that in jQuery you can do such amazing things like this.

  12. christian says:

    wow..i'm a atudent and you really help me a lot.. you're tuts are so cool!!!

  13. Shubhojit Roy says:

    thanks man for this lovely tutorial

    it took a bit of time for me to crack it

    but was at it from morning till now (evening)

    it was great
    hope to modify it asap for my project wrk.

  14. NetKit says:

    Very creative idea, great tutorial.

  15. Nathan says:

    This clock has a major "off by one" bug.

    I wrote about it in the comments on Hacker News:

    http://news.ycombinator.com/item?id=1024532

    Basically you are adding one to the current value which causes the gauges to be off by one value.

  16. Martin says:

    Thanks for the comments fellas!

    @ Nathan

    Actually the "off by one" bug is by design - it looks empty when the value of the dial is zero and the colorful ring around it is completely gone (and given it is midnight it would stay like this for an hour).

    However you are free to change it - you'll just need to tweak line four of the second part of jquery.tzineClock.js:

    var angle = (360/total)*(current+1);

    To something like this:

    var angle = (360/(total-1))*current;

  17. Cory says:

    That's pretty slick! thanks for sharing :)

  18. Awesome tutorial! And awesome clock concept!

    I have just one question.. could you possibly explain how to make the clock backwards to zero from a preset time?

  19. Kemal ONUR says:

    Thnk u so much. this's very nice:)

  20. jaan says:

    Wow ! fantabulous....

  21. Dan says:

    Your example is not working in FF 3.0 in Linux (Ubuntu 9.04). Only half rings are showing after you've hit a majority of minute / hour (i.e. 30+ seconds).

    Just letting you know, as I want to see the awesome clock too!

  22. Hm, I got it somewhat working so far (countdown version)..

    setInterval(function(){

    var currentTime = new Date();
    currentTime = Date.parse(currentTime);
    var futureTime = Date.parse('January 4, 2010 14:00:00');
    var dd = futureTime-currentTime;

    var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

    animation(gVars.green, s, 60);
    animation(gVars.blue, m, 60);
    animation(gVars.orange, h, 24);

    },1000);

    There's still a few problems..
    - Setting the future time day(s) into the future the hours don't show.
    - When the seconds counts down from 59 the green bar freezes at 29-30 seconds and stops rotating.

  23. Dugg! It's a very cool clock too! :) Thanks for sharing.

  24. Cool use of jQuery and CSS for the clock.
    Looks pretty impressive!!!

  25. wien says:

    great tuto, thanks

  26. Nice tut good idea...
    Tks

  27. normy4ever says:

    really cool, I will use it precisselly

  28. WP Tricks says:

    I need to try this demo on my own website, thanks for share

  29. SMiGL says:

    Cool functionality! Thanks!

  30. Valerij Primachenko says:

    Hey, Martin
    Just discovered this tut/plugin very nice idea and design. Congrats.
    But i missed the possibility to place the "wheels" in each other, just like an actual wall clock. So I changed a lot in the css and js, and by the way added some new functions. I would be glad if you will take a look at my changes, so if you email me I will send you my version.
    Sincerely , Valerij Primachenko.

  31. Vivek Jain says:

    Cool tricks, Thanks 4 sharing, very helpful.

  32. Brian says:

    Is there an alteration to the code that will allow the clock to read in 12 hour format instead of 24 hour format?

    Example instead of:
    14:37:51

    It would display
    2:37:51

    Thanks in advance,

    Brian

    1. maor says:

      currentTime.getHours()%12

  33. legolas says:

    very helpful. thanks for sharing.

  34. Love this, Martin. Super nice work. I made a few edits to make things countdown properly and give days leading up to the event. Thought I'd share my edits here and many thanks to Kris for getting things started!

    added another dial:

    // The colors of the dials:
    var colors = ['pink','blue','orange','green'];

    created day dial:

    setInterval(function(){

    var currentTime = new Date();
    currentTime = Date.parse(currentTime);
    var futureTime = Date.parse('September 23, 2011 12:00:00');
    var dd = futureTime-currentTime;

    var d=Math.floor((dd%(60*60*1000*24*365))/(24*60*60*1000)*1);
    var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

    animation(gVars.green, s, 60);
    animation(gVars.orange, m, 60);
    animation(gVars.blue, h, 24);
    animation(gVars.pink, d, 24);

    },1000);

    And then, Kris, this is to help hide that other half after 30 secs:

    if(angle<=180)
    {
    // The left part is rotated, and the right is currently hidden:
    element = clock.rotateLeft;
    clock.rotateRight.hide();
    }

    Thanks again! See it in action at drumlineapp.com

    1. Muhammad Qasim says:

      Hi, The countdown is no longer available at the provided site as its launched now. Have you got it posted somewhere else?

      Regards

  35. controlsea says:

    very nice!~I like it very much~May be I can make use of it in my website~

  36. Xiao says:

    So Cool ~~~I love it~~~thanks for sharing

  37. Alexo says:

    Dude!! Nice!!! Excellent!!Party On!! just kidding, but that is so cool...can it be a countdown for any or certain event?

  38. Alexo says:

    DUH!!! Someone already answer my question...should have read before opening my mouth!
    Regardless...amazing stuff!! I'm hooked!

  39. Kittu says:

    So nice..... First thanks to Martin for this nice article .. I have a small problem. Ii changed the images into 50 X 50 size and modifies some of the css of the timer ( jquery.tzineClock.css file) like below..... for getting a small timer...

    #fancyClock{
    height:50px;
    border:0px;
    width:150px;
    }
    .clock{
    /* The .clock div. Created dynamically by jQuery */
    background-color:white;
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
    float:left;
    }

    .clock .rotate{
    /* There are two .rotate divs - one for each half of the background */
    position:absolute;
    width:50px;
    height:50px;
    top:0;
    left:0;
    }

    .rotate.right{
    display:none;
    z-index:9;
    }

    .clock .bg, .clock .front{
    width:25px;
    height:50px;
    background-color:white;
    position:absolute;
    top:0;
    }

    .clock .display{
    /* Holds the number of seconds, minutes or hours respectfully */
    position:absolute;
    width:50px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    z-index:20;
    color:black;/*#F5F5F5;*/
    font-size:15px;
    text-align:center;
    top:15px;
    left:0;

    /* CSS3 text shadow: */
    text-shadow:4px 4px 5px #333333;
    }

    /* The left part of the background: */

    .clock .bg.left{ left:0; }

    /* Individual styles for each color: */
    .orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
    .green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
    .blue .bg.left{ background:url(img/bg_blue.png) no-repeat left top; }

    /* The right part of the background: */
    .clock .bg.right{ left:25px; }

    .orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
    .green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
    .blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

    .clock .front.left{
    left:0;
    z-index:8;
    }

    Then it is working fine for Moziall firefox and Google chrome. but it is not working correctly in IE.It just displays the digits... not the circle images..... I have spent lot of time.... but no use... what is the problem with my code.

  40. JLam says:

    change this in tzineclock.js

    element.css("left",-Math.floor((element.width()-50)/2));
    element.css("top",-Math.floor((element.height()-50)/2));

  41. IE6 does not like the CSS class selectors used within the plugin, such as leading to z-index not being applied correctly, mangled animations, pain, misery, suffering - the usual when dealing with IE6.

    Replacing them with ID selectors, while a complete pain, does fix the problem with the animation.

    Also, I have been unable to get the TwinHelix IE PNG Fix to work correctly with this plugin and IE6, so grey backgrounds made everything rather ugly, but working around that was much easier - I just replaced the PNG files with transparent GIFs. Job done!

    Thank you very much for the code, as well as its excellent documentation. I am currently in the process of mangling it into a countdown timer for use within our system.

  42. Katharine says:

    is it possible to make it smaller?

  43. Matt says:

    For those who want a 12 hour clock, instead of 24 hour:

    Add this line to jquery.tzoneClock.js at line 100:

    if( h >= 12 ){ h = h-12; } else if( h ==0 ){ h = 12; }

    Then adjust the line at 103 to read:

    animation(gVars.orange, h, 12);

    That's what I did and it works great.

  44. Giorgio says:

    Awesome Clock!I'm trying to use it on a theme for my iPhone,but i have a problem and I need help :)
    My problem is this:i have to put this clock on an image,so in jquery.tzine.css in class .clock .bg, .clock .front i've set no background.The problem now is that the part of the image that sould be hidden it is no longer hidden.
    Thanks for your help and great work!

  45. Sagar Raj says:

    brilliant!!

  46. Sandip Singh says:

    Hello, we have developed this further and made a wordpress plugin for this which can be dragged into a sidebar widget.

    Those who need it please email on sandip@avigma.com (Plugin is free, we are planning to upload on wordpress, but need to check with author first)

  47. Jack says:

    Does anyone have the finished copy of the countdown timer? I would appreciate it if someone could upload it.

  48. Maddy says:

    Does anyone have a working version of the 50px plugin, or know precisely how to scale it down? I love this, but I can't get the rings to work in place in Safari or Mozilla.

    1. Chris says:

      Hey, all I did was go through the css and change anything with a 200 to 50, and anything with a 100 to 25. Assuming that each image is 50x50px. However, I did run into a problem with the rotating of the images. The right div shows all the time, aka the left div does not cover it. So <30 seconds you can see the whole image rotating but once it hits 30 it will stop and the left part of the image will start moving. I didn't touch any of the z index values and I have gone through everything but still no luck, still looks good, but it would be nice to have that part working.

  49. maor says:

    how can i put multi number of clocks in the same webpage??

  50. Colby says:

    I just finished getting this to work as a countdown timer. All you need to do is:

    Change:

    setInterval(function(){
    		
    	var currentTime = new Date();
    	var h = currentTime.getHours();
    	var m = currentTime.getMinutes();
    	var s = currentTime.getSeconds();
    			
    	animation(gVars.green, s, 60);
    	animation(gVars.blue, m, 60);
    	animation(gVars.orange, h, 24);
    		
    	},1000);
    }
    

    to:

    setInterval(function(){
      var currentTime   = new Date();
      var futureTime = new Date('May 28, 2012');
      var dd = futureTime-currentTime;
    
      var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
      var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
      var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    
      animation(gVars.green, s, 60);
      animation(gVars.orange, m, 60);
      animation(gVars.blue, h, 24);
    
     },1000);
    }
    

    as well as Change:

    if(angle<=180)
    {
    	// The left part is rotated, and the right is currently hidden:
    	element = clock.rotateLeft;
    }
    

    to:

    if(angle<=180)
    {
    	// The left part is rotated, and the right is currently hidden:
    	element = clock.rotateLeft;
    	clock.rotateRight.hide();
    }
    

    With that you can also add in the days if you want which you would just add a new color to the : // The colors of the dials:

    var colors = ['orange','blue','green'];
    

    and then add the days to the code above which would make it:

    setInterval(function(){
       var currentTime   = new Date();
       var futureTime = new Date('May 28, 2012');
       var dd = futureTime-currentTime;
    
       var d=Math.floor((dd%(60*60*1000*24*365))/(24*60*60*1000)*1);
       var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
       var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
       var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    
       animation(gVars.green, s, 60);
       animation(gVars.orange, m, 60);
       animation(gVars.blue, h, 24);
       animation(gVars.pink, d, 85);
    
      },1000);	
    }
    

    Also for scaling it down what you do is:

    Change:

    element.css("left",-Math.floor((element.width()-200)/2));
    element.css("top",-Math.floor((element.height()-200)/2));
    

    to:

    element.css("left",-Math.floor((element.width()-50)/2));
    element.css("top",-Math.floor((element.height()-50)/2));
    

    if thats the size you want. Whatever the size you want that is where you need to change it as well as in the stylesheet. Anywhere it says 200 change to 50 and anywhere it says 100 change to 25. Basically the size you want it and half of the size you want it.

    I hope this was helpful : )

    If you go to http://www.idance-productions.com you can see a working example of it.

    1. John M says:

      Thanks for consolidating what eight bit studios published. Don't forget to make this changw if you add an additional circle:

      line: 62: for(var i=0;i<3;i++)
      to
      line: 62: for(var i=0;i<4;i++)

      If you don't make that change, it will not work.

      Thanks dude!

      1. pete says:

        hey john,

        i'm adding a dial just for days, none counter. i was wondering if you could help. as i'm added the above mentioned and still no dial appears?

    2. Arif Qodari says:

      Thank you,

      I have just finished my countdown timer. You may visit the result here:
      http://fun.pixelplay.me/countdown-timer/

      You can also change the date target by clicking the date text and there will be a calendar popup shows.

  51. peter piper says:

    Anyone know of a tweek to get this looking OK in IE as well, its disjointed in IE and jumps about

  52. proball says:

    Any one know how to display time of day (AM or PM).

    1. CK says:

      the time of day (AM/PM) would be awesome (displayed in the middle od the hours circle)...

  53. Andrew says:

    This is pretty awesome, thanks for sharing it with us.

  54. Aiz says:

    Hello, what is the license of this script, is it for commercial use as well? I would like to integrate it in one of my projects which will be for sale. Thank you!

  55. Jo says:

    Really awesome! Fantastic work! The only problme i have is that it will always display the users system time. I guess everybody know the time of the place her or she is living. How to show the time of any other place? I would like to show the time of a country i am writing about but my users are maybe from all over the world. All should see the same time ...

  56. Tiffany says:

    Is it just more or do the minute and hour circles swap places when you turn it into a countdown. As a clock it goes hour, minute, second, but as a countdown it goes minute, hour, second. Any ideas on how to fix that? I'm going to give it a try...

    1. Tiffany says:

      change the order of the color apparently. that's easier than I thought!

  57. Claire says:

    For those wishing to get the clock working in Document mode: IE8 standards (ie, the X-UA-Compatible meta tag set to IE=EmulateIE8 rather than IE=EmulateIE7 as in this example), just add the following rule:

    .clock .bg.left
    {
    position: static;
    }

    Thanks for sharing Martin

  58. Here is a fix for IE9...

    Add this after the else if statement for internet explorer

    else if(element.css('ms-transform')!==undefined)
    element.css('ms-transform',rotate);

    1. Alaa says:

      Thanks alot :)

  59. Julio says:

    Hey man, i did a little adaptation of your code to use on a page i'm doing, hope you don't mind!

    here's working http://timemeup.net/show/88/the-walking-dead

    If you want me to add a comment on the code to reference to this tutorial, let me know!

    Thanks a lot!

  60. pete says:

    hey,

    i also wanted to add a dial. i'm following the input from peep's above; eight bit studio's, kittu, jlam, colby and john m (cheers guy's). i'm not doing it for count down just a normal clock. just wanted to know that this was the correct script additions or if anything else is needed to run an extra (day) dial?

    for(var i=0;i<4;i++)

    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    var d = currentTime.getDays();

    animation(gVars.green, s, 60);
    animation(gVars.blue, m, 60);
    animation(gVars.orange, h, 24);
    animation(gVars.purple, d, 85);

    },1000);

    /* Individual styles for each color: */
    .orange .bg.left{ background:url(img/bg_orange_copy.png) no-repeat left top; }
    .green .bg.left{ background:url(img/bg_green_copy.png) no-repeat left top; }
    .blue .bg.left{background:url(img/bg_blue_copy.png) no-repeat left top; }
    .purple .bg.left{background:url(img/bg_purple_copy.png) no-repeat left top; }

    /* The right part of the background: */
    .clock .bg.right{ left:25px; }

    .orange .bg.right{ background:url(img/bg_orange_copy.png) no-repeat right top; }
    .green .bg.right{ background:url(img/bg_green_copy.png) no-repeat right top; }
    .blue .bg.right{ background:url(img/bg_blue_copy.png) no-repeat right top; }
    .purple .bg.left{background:url(img/bg_purple_copy.png) no-repeat left top; }

  61. marco says:

    i tried adding this

    var format ="AM";
    if(currentTime.getHours()>11){
    format="PM";
    }

    and tried putting it near the hours but i couldnt find were it gets "printed" on screen can i get some help here please?

  62. Jeromy says:

    Is it possible to get the same result without the image files (possibly using canvas)?

    1. Quentin says:

      Jeromy,

      May be a little late, but I happened to be playing with something quite similar recently and made this using only HTML, CSS and JS. See it on jsFiddle.

  63. derrick says:

    real good mate. tried implementing a similar concept animating a circular infographic element keeping count of users online... havent managed much though.. any ideas on how to animate infographic elements dynamically? thanks for the great tut.

  64. Ma8 says:

    Great Tutorial. Keep going.

  65. Noob says:

    Hi

    Anyone knows how to add a colon between the 3 indicators?

    Great tutorial, keep up the good work ;)

  66. Bedazzled says:

    Great toturial, Martin. Looks really nice :)

    I'm struggling with the same issue mentioned by Dan. My clock also displays only half a rotating ring every 30 sec. I'm new to this, I assume it has to be corrected somewhere in the tzineClock.js?

    Any help would be appreciated.

    Thumbs up, Martin!

  67. Kanpur says:

    really helpful...was looking for a clock to put in my project and found this.... thanks a lot buddy :)

  68. gmornob says:

    hey Martin,
    this is awesome design ! try to develop it , thx

  69. Ang says:

    Hello Martin, thanks!

    Btw, this clock is great, i do this, but in my system this get the time of each client, i want do this getting the time of the server only, how I can do this?
    Please anyone can help me?

    Regards

  70. Angelo says:

    Hello Martin, thanks for this great stuff.
    Please, any can help me about get the tiem of the server by this Jquery clock, not the time of client, but the time of the server.

    Regards

  71. Nur Ulul Asman says:

    For someone who has problem with IE9+ compatibility, just change

    element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
    in jquery.tzineClock.js with this
    element.css('transform', rotate);
    btw, nice job dude for making this clock

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links