A blog about me, my doings and everything I think deserves attention.

little web clock

jsclock little web clock

(If you don’t see something like this after clicking the image, please update your browser)

As I’ve mentioned I want to learn more JavaScript. Today I’ve played around a little with some chapters of JavaScript lessons and CSS3. What you see above is generated without any graphics. Just with JavaScript and CSS3. The gradient feature in CSS3 is really a charm. If you don’t want to get a headache over coding the gradients yourself, there are some generators for it around, like

See the JavaScript Demo here (or click the image).

Code for Clock:

<script type="text/javascript">
function clock(){
var now =  new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
minutes = (minutes <; 10 ? "0" : "") + minutes;
hour = (hour <; 10 ? "0" : "") + hour;
var time = hour + ':' + minutes;
document.getElementById('block').innerHTML = time;

Code for background gradient (both for Webkit and Mozilla):

background: -webkit-gradient(
 left bottom,
 left top,
 color-stop(0.5, rgb(0,0,0)),
 color-stop(0.98, rgb(77,77,77))
background: -moz-linear-gradient(
 center bottom,
 rgb(0,0,0) 50%,
 rgb(77,77,77) 98%

Code for rounded corners:

border-top-left-radius: 50px 80px;
border-top-right-radius: 50px 80px;
border-bottom-left-radius: 50px 80px;
border-bottom-right-radius: 50px 80px;

The full source code, as always, is available through CTRL+U icon wink little web clock

2 comments already

2 Responses to “little web clock”

  1. hi,
    nice, but your round corners thingy just works in Chromium. Within Firefox 3.6.8 (latest Version) they are not round.
    You shouldn’t use new web features that the most common browsers don’t support for a every day use. I COULD try Internet Explorer 8, but I refuse to start that peace of … .
    As a test its fine I guess.


  2. I know I shouldn’t, that’s why I don’t. I wouldn’t sell this to a customer with old-fashioned browser audience, but I will use this stuff as demonstrations and I could imagine to use it on my blog, because I decide the audience here. People obsessed with IE or other antique software can stay home or accept, that the layout might not be as sexy. I think adding the preview image was a good idea and shows people if their browsers are way behind or not.

Leave a Reply