Deprecated: Function eregi() is deprecated in /home/content/48/9096548/html/xfunda.com/templates/ja_barite/ja_menus/Base.class.php on line 62
JavaScript Digital Clock

Excellent Fundamental...!!!

 
  • Increase font size
  • Default font size
  • Decrease font size
  • default color
  • green color
  • blue color

JavaScript Digital Clock

E-mail Print PDF

JavaScript Digital Clock

In this article we are going to design a JavaScript based Digital Clock. Here we are see use a HTML Form to show our Digital Clock. Take a look below on piece of code…

<form name = "clockForm">
<input type="text" name="clock" size="10" class="frm" />
</form>

Here we have defined HTML form. And use input and assign a class frm to it. Class frm will take care of representation of clock.

.frm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #164BA0;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
}

Now we have to add JavaScript which will generate Digital clock for us. Now we define a function Display() and going to call it through Window object supports methods setTimeout() to call same function after every 1000 milliseconds. The Window object supports methods for setting timers that we might use to perform a variety of functions. These methods include setTimeout() and clearTimeout(). The basic idea is to set a timeout to trigger a piece of script to occur at a particular time in the future. The general syntax is

timerId = setTimeout(script-to-execute, time-in-milliseconds);

As the Display() get called after every 1000 milliseconds recursively. A new value by Date() class gets stored in variable Today. Date class is mostly used for define and manipulate dates. You can get current time as well as date. You can also perform calculation based on date or times using date class. This is not a reserved word so you can declare your own variable or function called Date but if you do then you will not be able to use the Date class. See following piece of code for Display()

function display() {
    var Today = new Date();
    var hours = Today.getHours();
    var min = Today.getMinutes();
    var sec = Today.getSeconds();
    var Time = ((hours > 12) ? hours - 12 :(hours == 0) ? 12 :hours);
    Time += ((min < 10) ? ":0" : ":") + min;
    Time += ((sec < 10) ? ":0" : ":") + sec;
    Time += (hours >= 12) ? " PM" : " AM";
    this.clockForm.clock.value = Time;
    setTimeout("display()",1000);
    }

    display();

Our Clock will look like below image...

JavaScript Digital clock

Here we are also converting 24 hour Clock into 12 hour with help of conditional operator. The conditional operator is another form of an “if” condition. It takes three parameters. The syntax looks like this: (Condition) ? val1: val2. If condition is true then it will return val1 otherwise val2.

example:

Please download Source Code and test it ...

Source Code:

Download Source code for 'JavaScript Digital Clock'

Download


Also See:

Trackback(0)
Comments (3)Add Comment
HIOX FREE JavaScript scripts and code
written by geetha, April 08, 2008
Free javascript scripts including slide shows script, web calendar, mouse effects, stop watch, timer, domain and email validation script, date functions, alphanumeric validation function etc..
mistake in Javascript Digital clock tutorial
written by Maheshwari, April 21, 2009
Mistake in the following line

this.clockForm.clock.value = Time;

Solution :

document.clockForm.clock.value = Time;
Problem with the script
written by Nejc, April 28, 2009
This script is working fine but it stops when system date is changed (to the "history"). Is there any chance to fix that bug? smilies/wink.gif

I know setTimeout works with system date and that's a problem... is there any possibility in javascript to use CPU clock for the "timeout".

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
Last Updated ( Thursday, 28 February 2008 15:45 )  

Articles


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Adobe Gallery


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Community


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

FAQ's


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Resources


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Who's Online

We have 33 guests online

Subscribe Feeds

Enter your email address:

Sponsor Adds


 
 

Submit Article

We want to develop such a Community portal which will provide a good resource on latest hot technologies such as .NET, VB.NET, C#.NET, ADO.NET, ASP.NET, PHP, Flash, Photoshop. If you like to write for us, this guideline for you. please send your article, faqs on admin[at]xfunda.com

Adobe Gallery Photoshop Tutorials...

Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Category - Photoshop >> Photo Effects. ...
 
Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Category - Photoshop >> Photo Effects. ...