I’ve been finding myself becoming more interested in what HTML5 can do. As I see it HTML5 stands to be a potential replacement for flash, in addition to the features and interactivity that are made available by various javascript frameworks out there.
A good starting point would be to start off with something simple, i.e. a clock. Here’s a sample project I threw together to help make myself more familiar with HTML5′s canvas.
The clock you see on the left is written completely in javascript and takes advantage of HTML5 and the canvas element — no flash necessary.
If you see a blank clock face with no hands, that means that your browser does not support HTML5. You will need to be using the latest version of Chrome, Firefox, Opera or Safari in order for the clock to work. IE does not currently natively support the canvas element.
There are several good canvas tutorials out there so please check those if you want a more in-depth introduction to HTML5′s canvas element.
In order to use this clock, you’ll need to setup your canvas element:
<canvas id="jclock" height="125" width="125"> Content or message to display if the browser does not support Canvas/HTML5. </canvas>
Initializing the clock:
$(window).load(function() { new jClock('my-clock-face-image.png', $('#jclock').get(0)); });
You can also pass in additional options to change items such as the hand colors, or image size. Here’s the defaults as defined in the plugin:
// override default options: // i.e. new jClock('image.png', $('#canvas').get(0), {shadow: false}); jClock.defaults = { height: 125, // default height width: 125, // default width secondHand: true, // show the second hand shadow: true, // display shadows across all hands second: { // second hand style options color: '#f00', width: 2, start: -10, end: 35, alpha: 1 }, minute: { // minute hand style options color: '#fff', width: 3, start: -7, end: 30, alpha: 1 }, hour: { // hour hand style options color: '#fff', width: 4, start: -7, end: 20, alpha: 1 } };
Feel free to download the source code and play around with it, or ask any questions you may have in the comments below.
13 Comments Subscribe to Comments
Outstanding write-up, can you guys please help me crack this new Google code they used for their logo? It’s in HTML5…
Hi Jason,
Many thanks for the clock source. How would I go about changing the time on the clock to account for timezone differences? i.e. If I wanted to offset the time by a few hours to account for different timezones?
Well the clock is based on your local system time, so it would always be offset by whatever the user’s time was. If you still wanted to do something like that, you could have an offset inside the tick function. Something like this:
Then inside your options (and defaults) you could define +/- how many hours you wanted to offset the time. Example:
Or it could be passed in directly.
Thanks Jason,
That gives me something to work with.
Many thanks for your help again.
[...] calender clock | kdedevelopers.org Javascript Clock using HTML5 and Canvas | scurker.com Magic Buttons! – Index of examples CoolClock – The Javascript Analog Clock World Clockr [...]
I love your clock, but it might want my arrowed lines! Check out my clock on canvas at dbp-consulting.com. Mine’s not quite the way I want it yet, it scales nicely with canvas size, (I have a little one at the top of the page and a big one at the end, but I want the clock to catch font resize events and scale the canvas width and height. I also want to have background and foreground styles for the canvas control the bezel and background colors for the clock. I know how, but haven’t gotten around to it yet. I also want to be able to offset timezones so that you can have New York time and San Francisco time, and then that seems to call for a caption. Hmmm. Anyway, glad to see someone thinking like me. Thanks;)
Hello,
this code is great. I have one question for you :)
What about if I need to use only MY time. I need that visitors on my site sees only the time of the city where I’m living.
Is this possible?
Thank you!
andrea
Love this. Let’s say I want five of them on a page all set to a different timezone somewhere in the world. I could do a php variable for each clock/zone then incorporate Javascript into a PHP script? Not sure how to do it yet, though. Any thoughts??
BTW, how would I default to a .swf if canvas not supported by browser?
Thanks.
@Dani Creating a world clock would be a little more involved, and you probably would want to synchronize it based on the server time and not the client time. Right now the plugin is based on the local user’s time.
You could probably pass in some sort of start time and an offset (similar to an above comment) to accomplish that goal, but that would require some modifications to the plugin as it currently just uses the client’s local time.
This StackOverflow question may give you an idea on how you might get started.
Hello! Thank you for this great script. I used a Flash script bevor. Now, on iPad-time I was looking for HTML5 and had the same problem like Dani.
I extended the script to use server’s gmtime to calculate a basetime and the AM/PM mark.
I use it on my page http://www.japanfreunde.de (japanese/german site).
@Dani: So you can have unlimited clocks on your site.
@Dani I think what you want could be done this way… in php create five objects representing your clocks with their attributes (or a ‘clocks’ object that is an array of many ‘clock’ objects) and encode it as json (php 5 has a function for that)… then in your page inside simply let’s a js eval the json and you will have the clocks objects definition at your disposal to do whatever you want… If you are not sure what json is about just search for it, it’s damned simple and powerful…
Oh! and look at this!!! :-D http://www.codeproject.com/Articles/366004/HTML5-Clock-with-NTP-time-support