Geronimo89.dk

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 http://gradients.glrzad.com/.

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;
setTimeout('clock()','1000');
}
clock();
</script>

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


background: -webkit-gradient(
 linear,
 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