Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

FREE 12 month online training for ASP.NET & MS Expression Studio and a Free copy of MS Expression Web with Windows Server Purchase
How to Display a Digital watch on your Web Form

Author: DevASP
Download Source Code : 464_DigitalClock.zip

This article is about how you can display a digital watch on your web form. This will automatically update itself and show you the updated time.

  • Steps you will do. 
  • Start visual studio and create a new web application. 
  • Open the HTML Design of your web page and replace it with the following. This includes the java scripts functions and the html design of the page.

 

<HTML>

    <HEAD>

    <TITLE>JavaScript Clock</TITLE>

    <SCRIPT LANGUAGE="JAVASCRIPT">

 

    var timerID = null;

    var timerRunning = false;

 

 

    function stopclock(){

 

    if(timerRunning)

     clearTimeout(timerID);

     timerRunning = false;

  

    }

 

 

    function showtime() {

 

     var now = new Date();

     var hours = now.getHours();

     var minutes = now.getMinutes();

     var seconds = now.getSeconds()

     var timeValue = ((hours < 10) ? "0" : "") + hours

     timeValue += ((minutes < 10) ? ":0" : ":") + minutes

     timeValue += ((seconds < 10) ? ":0" : ":") + seconds

     document.form.face.value = timeValue;

     timerID = setTimeout("showtime()",1000);

     timerRunning = true;

   

    }

 

 

    function showdate() {

     var now = new Date();

     var date = now.getDate();

     var month = now.getMonth();

     var month=(month+1);

     var year = now.getYear()

  

     var dateValue = ((month < 10) ? "0" : "") + month

     dateValue += ((date < 10) ? "/0" : "/") + date

 

     dateValue += "/" + year

     stopclock();

     document.form.face.value = dateValue;

     delay(2);

     startclock();

    

    }

 

 

    function startclock() {

  

    stopclock();

    showtime();

    

    }

 

 

    function delay(secs) {

 

    count = 0;

    while (count < (secs * 4000)) { count++ }

 

    }

 

 </SCRIPT>

</HEAD>

 

<BODY onLoad="startclock()">

   <FONT FACE="ARIAL" COLOR="#000080">

      <CENTER>

       <H1>JavaScript Clock</H1>

      </CENTER>

       <HR />

   </FONT>

   <FORM name="form">

     </CENTER>

       <INPUT type="button" name="face"  value="00:00:00" onClick="showdate()" /> </CENTER>

     <CENTER>

   <h3>

     <a href="http://www.devasp.com">DevaspTeam</a>

   </h3>

   </CENTER>

  </FORM>

 </BODY>

</HTML>

 

Run your application. It will show the time on a button. You can display it anywhere or at any control.

Article Comments
Excellent article very useful. thanks to the team

Posted on 10/27/2007 6:37:46 AM by Prakash

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to Display an Announcement Box on your Site

Disclaimer - Privacy
© 2002-2014 DevASP.net