How to create a Digital Clock with JavaScript

December 16th, 2006

This is an example of a simple digital clock created with JavaScript. To make the code more clear I’ve put both the JavaScript code and the CSS code directly in the HTML document.
This is what the clock can look like:
Digital Clock

You can try the code yourself by copying it into a text editor and name the file for example digital-clock.htm.

If you want to use this digital clock script on your website I would recommend you to put both the JavaScript code and the CSS code in seperate files external to the HTML file. By doing so the filesize would be reduced and the clock could more easily change it’s function and/or style.

Here’s a copy of the the code for the example linked to above:

Copy of the Digital Clock Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Digital Clock Example | WebPelican</title>

<meta name="keywords" content="digital clock" />

<meta name="description" content="Example of a digital clock created with JavaScript." />

<script type="text/javascript">

function digital_clock()

{

var date=new Date()

var hours=date.getHours()

var minutes=date.getMinutes()

var seconds=date.getSeconds()

/*

*Calls the addZero function to add a zero infront of minutes or seconds if they are below 10, i.e.

*to make it look like 12:07:09, not 12:7:9

*/

minutes=addZero(minutes)

seconds=addZero(seconds)

/*

*Puts hours in the element with the hours id,

*minutes in the element with the minutes id,

*and seconds in the element with the seconds id

*/

document.getElementById('hours')

.innerHTML = hours

document.getElementById('minutes')

.innerHTML = minutes

document.getElementById('seconds')

.innerHTML = seconds

/*

*Runs every half second

*/

setTimeout('digital_clock()', 500)

}

/*

Adds a zero infront of minutes or seconds

*/

function addZero(min_or_sec)

{

if (min_or_sec < 10)

  {min_or_sec="0" + min_or_sec}

  return min_or_sec

}

</script>

<style type="text/css">

<!--

/*Style Sheet*/

body,

html {

    background:#eee url(/resources/images/bg.gif);background-repeat: repeat-x;

}

body {

    padding:0 15px 15px;margin-top:15px;

    color:#222;

}

#wrap {

    position: relative;

}

#digital-clock {

    border:1px solid #fff;

    width:7em;

    }

#digital-clock ul {

    margin:0;

    padding:0.1em;

    background:#003366;

    color:#FFF;

    list-style-type:none;

    text-align:center;

    }

#digital-clock li {

    display:inline;

    padding:0;

    margin:0;

    }

-->

</style>

</head>

<body onload="digital_clock()">

<h1>Digital Clock</h1>

    <div id="wrap">

        <div id="digital-clock">

            <ul>

            <li id="hours"></li>

            <li> :</li>

            <li id="minutes"></li>

            <li> :</li>

            <li id="seconds"></li>

            </ul>

        </div>

    </div>

</body>

</html>

Entry Filed under: JavaScript

Bookmark with del.icio.us

Digg it?

59 Comments Add your own

1 | December 10th, 2007 at 9:26 am by cori

Is it possible to save on credit cards at the same time spending as much as you are accustomed to? I’ve heard that it is possible to do by means of balance transfer credit cards with 0% intro APR. You move your current balance onto a new card and save on interest. The most important thing is not to make debt on the new card. For balance transfer credit cards you can go to

balance transfers all types of credit
2 | November 28th, 2008 at 2:03 am by parfumerz

Hello from Russia

It is very difficult to read in English, but we try:)
3 | December 6th, 2008 at 8:44 am by Kuban

Реализация довольно несложная, даже для начинающих веб-мастеров. Спасибо за полезную информацию!
4 | December 9th, 2008 at 2:04 am by stalingrad-game

Thanks:)
5 | December 9th, 2008 at 2:07 am by stalingrad-game

may be made))
6 | December 26th, 2008 at 4:37 am by tsk

nice:)
very
7 | December 26th, 2008 at 4:38 am by tsk

Hello
It is very difficult to read but we try:)
8 | January 4th, 2009 at 6:10 pm by Doctor

С Новым Годом! Больше читателей в новом году!
9 | January 23rd, 2009 at 6:39 pm by bags

кто бы мог подумать=) так держать!
10 | January 23rd, 2009 at 6:47 pm by sumkin

действительно, довольно интересно…
11 | January 23rd, 2009 at 6:50 pm by binokl

2TS
12 | January 26th, 2009 at 11:18 am by igrulkin

Легче нести ахинею, чем бревно.
13 | January 26th, 2009 at 12:36 pm by alexai

Чем больше понимаешь, тем больше круг людей, которым с тобой не о чем
14 | January 26th, 2009 at 12:37 pm by matrin

Эх, взять бы автомат, да разрядить обстановку!!!!=)
15 | January 27th, 2009 at 2:27 am by lenka

Разговор начистоту обычно заканчивается взаимным обливанием грязью.
16 | January 27th, 2009 at 2:34 am by len4ik

Наивность - это редкий дар смотреть на мир невооруженным взглядом…
17 | January 27th, 2009 at 2:37 am by perfectzoom.ru

Последнее время читаю между строк. Стал меньше уставать.
18 | January 27th, 2009 at 2:38 am by toys777.ru

Если что-то понятно само собой, то кому оно нужно?
19 | February 4th, 2009 at 4:12 am by жEлтЫйкOт

Занимательная и интересная статья у вас. В отличие от большинства других подобных почти нет воды!
20 | February 26th, 2009 at 3:07 am by Адриан

Вот именно поэтому и не хочется иногда двигаться вперёд!
21 | March 5th, 2009 at 8:27 pm by stulsegex

Хорошо пишете. Учились где-то или просто с опытом пришло?
22 | March 31st, 2009 at 11:39 pm by Владимир Крылов

Познавательно! Все очень понятно и грамотно, и в то же время без излишних умствований и самолюбования, и на доступном языке. Редкий случай когда человек делится актуальной и полезной инфой. Спасибо автору!
23 | April 20th, 2009 at 4:44 am by MAШTAГИHEЦ

какой-то оффтопик уже начался
24 | May 10th, 2009 at 10:36 am by enacecrealo

Извините если не туда, но как с админом сайта связаться?
25 | May 10th, 2009 at 11:46 am by Ethessvex

Достатно интересно конечно. Хотя я немогу подписаться под каждым словом, но в общем соглашусь.
26 | May 13th, 2009 at 4:54 am by virabux

Наткнулся случайно на Ваш блог. Теперь стану постоянно просматривать. Надеюсь, не разочаруете и дальше
27 | May 13th, 2009 at 10:45 am by hebygaf

Не стану говорить за остальных, но именно мне этот пoст понравился.
28 | May 13th, 2009 at 11:38 am by vidifyw

Понравилась статья. А будет ли продолжение ?
29 | May 14th, 2009 at 4:36 pm by kynisaz

Добавил в свои закладки. Теперь буду вас намного почаще читать!
30 | May 14th, 2009 at 5:34 pm by wechate

Спасибо вам за сайт, очень полезный ресурс, мне очень нравится
31 | May 15th, 2009 at 2:33 am by jasytep

Спасибо огромное. Почитал и понравилось. Картинок бы ещё.
32 | May 15th, 2009 at 4:32 am by lutucho

Интересно, а почему так редко блог обновляете?
33 | May 15th, 2009 at 5:28 am by hegutur

Огромное вам человеческое спасибо, очень актуальная заметка.
34 | May 15th, 2009 at 9:08 am by chulato

Спасибо огромное. Почитал и понравилось. Картинок бы ещё.
35 | May 25th, 2009 at 2:51 am by gigacak

Ваш пост навел меня на думки *ушел много думать* …
36 | May 25th, 2009 at 4:57 am by kumuvuj

Интересно, а почему так редко блог обновляете?
37 | May 25th, 2009 at 6:08 am by gosahot

Хорошо пишете. Учились где-то или просто с опытом пришло?
38 | May 25th, 2009 at 8:02 am by goquiby

Очень интересно!!! Только не очень могу понять как часто обновляется ваш блог?
39 | May 26th, 2009 at 4:37 pm by Sladaneerge

Афтар недоумок=)
40 | May 30th, 2009 at 4:34 am by Bзлoмщик

Скажите, а можно ли взять какие-нибудь статьи с вашего сайта? Со ссылкой на первоисточник разумеется.
41 | June 4th, 2009 at 3:31 am by epox

То, что нужно! Целый час искал… спс
42 | June 7th, 2009 at 12:24 pm by Роман

Да, я с подобным тоже сталкивался
43 | June 18th, 2009 at 9:36 am by Познер блог

Прочитал пост. Даже на рсс к вам подписался …
44 | June 30th, 2009 at 2:04 am by Илья

Читаю уже не первую неделю Ваш блог, узнаю много интересного. Спасибо Вам за Ваш труд!
45 | July 23rd, 2009 at 5:55 am by Георгий

Занятно, откуда такое чудо-юдо вылезло?
46 | July 23rd, 2009 at 4:41 pm by Словарь Юриста

списки кандидатов, выдвигаемые партиями политическими и избирательными объединениями (блоками) на выборах в представительные органы, проводимые сообразно пропорциональной избирательной системе.
47 | July 25th, 2009 at 8:06 pm by Рубен Павленко

У вас конечно много чего упрощено, в отличии от реальности…
48 | August 15th, 2009 at 2:14 am by beetapsetrilt

A chto dlya vas vash blog? Vi proffesional’niy blogger ili eto prosto dlya dushi?
49 | August 21st, 2009 at 5:27 am by Thireleld

Интересный блог- ещё зайду
50 | August 23rd, 2009 at 2:19 pm by WARLOCKMAN

Познавательно! C КПК немного тяжело читается, но оно того стоит!
51 | August 26th, 2009 at 4:22 am by кaмycя

Хм… что-то у меня ссылка не открывается, которую указали. Это у всех так, или только у меня?
52 | September 3rd, 2009 at 8:05 pm by Illelsvut

газ и уголь в России

Хотелось желание понимать продолжение…
53 | September 4th, 2009 at 11:49 am by KaceemaicsgaL

В прошлом годы был на Ибице, так там познакомился с человеком, у которого стиль изложения материала очень похож на ваш. Но, к сожалению, тот человек очень далек от Интернета.
54 | September 11th, 2009 at 9:01 am by Фильмы онлайн

Смотреть фильмы онлайн
55 | September 14th, 2009 at 12:46 pm by DedMorozz

Чтобы сделать детей хорошими, нужно сделать их счастливыми. Порадуйте своих детей, сделайте заказ Деда Мороза. Сказочный волшебник Дед Мороз со своей внучкой Снегурочкой принесут в Ваш дом незабываемый праздник, приятные впечатления от которого останутся на всю жизнь. Радости детей не будет предела, когда, открыв дверь, они увидят на пороге Деда Мороза с большим мешком с подарками.
http://www.f-slon.ru/?mode=pages&page=new_year&d=n
http://www.goodparty.ru/zakaz-deda-moroza/
Заказ Деда Мороза на дом по телефонам: (495) 662-98-64
56 | September 14th, 2009 at 12:55 pm by dozorspb

То ли в википедии, то ли еще где я уже замечал почти такую же подборку данных да ладно!
57 | October 8th, 2009 at 12:37 pm by RoobbyRabooro

Первые отчетности о применении лекарств от недостаточной эрекции.
Шор:сиалис в новосибирске

немного обо мне ( так как в любом опыте необходимо знать условия, исходные данные, показатели и т.д.))) ). Мне 21 с детского сада ко мне тянулись девочки, сейчас же все гораздо лучше, в последний год было очень много новых знакомств, за один день я успевал с тремя ! ! ! девушками, вобщем жизнь насыщеная. И не смотря на то что с интересной мне девчонкой я могу с 11 вечера до 7 утра заниматься сексом, бывают моменты, то ли от настроения, то ли от усталости, когда сложно привести себя в порядок и показать что то красивое в постели, именно поэтому не плохо иметь с собой всегда заветную голубую таблеточку, хотя раньше ничего подобного не употреблял, но я к своим годам набрал очень много опыта и думаю что смогу красочно и объективно описать действие этих таблеток, продолжение следует…
См.здесь: где купить виагру +в москве
58 | October 8th, 2009 at 10:05 pm by wiburge

Так зачитался, что пропустил бы любимую передачу ))
59 | October 16th, 2009 at 10:03 pm by karr

Ну вы бы подрались еще, нашли о чем поспорить