Clocks Using JavaScript in ASP.Net

Introduction

In this article, we will see how to create clocks on our webpage with JavaScript. We can create the clocks on the server-side using the timer control and an update panel that periodically makes a postback to the server and this clock will show the server time. If we want to create the clock on the client side then that can be done using only JavaScript.

Background

While searching using Google I found many examples of creating a clock with JavaScript on the client-side. From that, I'm giving here three examples that can be helpful to display a clock on the client browser without much effort. So we will see three clocks one-by-one.

This clock is a very basic clock that will look like the following screenshot:

Use the following procedure to create this 24-hour format clock.

Add a new page to the application and write the following script in the head section of the page as in the following:

Step 2

We have the script ready. We now need to call the StartClock and StopClock functions in the body section as in the following

In the form now create the control to display the time. We will create a TextBox input control of HTML to display the time.

Clock With Images This clock looks like a very effective clock because this clock uses it's GUI with images to display the time to the client. This clock looks as in the following image.

Use the following procedure to create this clock.

Step 1Add a new page to your application; copy the images uploaded with attachments and paste it into your root directory. Step 2 In the body, the section writes the script given below. Initially, we need to display the static images and then write the script

Movable Clock

This clock is a very attractive and animated clock along with the previous two clocks. This clock will appear only in IE; it is not supported in other browsers. This clock will look like the following.

Use the following procedure to create this clock.

Add a new form and by default, our form has some lines written as in the following.

Here it's specifying the XHTML 1.0 but we need to modify this to HTML 4.0 as in the following