Saturday, December 22, 2012

How to develop a Clock in JavaScript

This post demonstrates how to start a clock when a user click on a button, remember this is not a timer it's a clock.

Add the following div tag in your HTML code.

<div id="timer">

In the page header tags add the following JavaScript code.

<script type="text/javascript">
function myClock() {
var myDate = new Date();
var t = myDate.toLocaleTimeString();
document.getElementById("timer").innerHTML = t;

function tick() {
var inter = setInterval(function () { myClock() }, 1000);

In myClock() function it gets the current system date time and convert it into time string and display on the div tag inner HTML.

Now we need the time to run. In the tick() function we use setInterval function which runs the same code after every 1000 milliseconds (1000 milliseconds = 1sec). So the clock is updated after every one second. 

No comments:
Write comments
Recommended Posts × +