How to make a digital clock

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a digital clock
You don't need a physical clock to view the passage of time. (Martin Poole/Photodisc/Getty Images)

If third-party software digital clocks bore you, build your own using Microsoft's Hypertext Application (HTA) programming language. Using features provided by Internet Explorer, the HTA language brings the power of HTML and JavaScript to your desktop. Web developers place digital clocks on Web pages using a few lines of JavaScript. By adding this code to an HTA program instead, you can customise your own desktop digital clock using familiar Cascading Style Sheet (CSS) properties.

Skill level:


  1. 1

    Open Notepad and paste this HTA declaration block into a new document:



    <title>HTA Test</title>






    <style type="text/css">

    .clock Style {border: thick dotted blue;

    background-colour: #FFFF00; width: 100px;

    height: 20px; text-align: centre;



    The "style" portion of this code, shown at the bottom, defines a CSS class named "clockStyle." This class defines the clock's appearance. The border attribute, for example, places a thick, dotted blue border around the clock. The clock's background colour is yellow. The width and height attributes determine the clock's pixel dimensions.

  2. 2

    Add this JavaScript block below the code shown in the previous step:

    <script type="text/JavaScript" language="JavaScript">

    var window Width = 150;

    var window Height = 100;

    var tick Interval = 1000;

    var clock;

    var hours;

    var minutes;

    var seconds;

    var display Switch = 9;

    var delimiter = ":";

    var clock Body;

    function start Clock(){

    var date = new Date();

    var time = " ";

    hours = date.getHours();

    minutes = date.getMinutes();

    seconds = date.getSeconds();

    if (hours <= display Switch)

    hours = "0" + hours;

    if (minutes <= display Switch)

    minutes = "0" + minutes;

    if (seconds <= display Switch)

    seconds = "0" + seconds;

    var current Time = hours + delimiter + minutes + delimiter + seconds;

    clockBody.innerHTML = current Time;

    clock = set Timeout("start Clock()", tick Interval);


    window.onload = function () {

    window.resizeTo(window Width, window Height);

    clock Body = document.getElementById("clockBody");

    start Clock();



    Note the window Width and window Height variables at the top of the code block. These control the size of the window that contains the digital clock. Change those values to anything you like.

  3. 3

    Add the code shown below after the code described in the previous step:


    <div id="clockBody" class="clockStyle">




    This creates a div element. This is the clock's body. Its class attribute references the CSS style declaration described previously.

  4. 4

    Press "Ctrl" and "S" simultaneously and type "DigitalClock.hta" in the "File Name" box that appear in the "Save As" window. Click "Save" to save the file.

  5. 5

    Open Windows Explorer and find that file. Double-click the file to display the digital clock.

Tips and warnings

  • Customise the clock by altering the CSS properties in the document's "style" section. For instance, to change the background from yellow to pink, replace "yellow" with "pink." Clocks usually refresh their displays every second. To change this clock's refresh rate, change 1000 to another value such as 2000. Doing so causes the clock to refresh its display every two seconds.
  • Electro-Static Discharge can ruin almost any electronic device. When handling parts keep them away from paper, tape, foam, or anything else that can build up a charge (even your hair).

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.