Saturday, January 28, 2012

How to show the Clock on Button using JavaScript


JavaScript Code:
<script language="javascript" type="text/javascript">
       var timerId = null;
       var timerRunning = false;

       function getDate() {
           Todays = new Date();
           currentDate = "Today Date is: " + (Todays.getMonth() + 1) + " / " + Todays.getDate() + " / " + Todays.getYear();
           document.clock.date.value = currentDate;
       }

       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 > 12) ? hours - 12 : hours);
           timeValue += ((minutes < 10) ? ":0" : ":") + minutes
           timeValue += ((seconds < 10) ? ":0" : ":") + seconds
           timeValue += (hours >= 12) ? " P.M." : " A.M."
           document.clock.face.value = timeValue;
           timerId = setTimeout("showTime()", 1000);
           timerRunning = true;
       }

       function startClock() {
           stopClock();
           getDate()
           showTime();
       }
</script>


HTML Code:
<body onLoad="startClock()">
<form name="clock" onSubmit="0">
       Date: <input type=”text” name="date" value="dateTime" />  <br />
       Time:<input type=”button” name="Submit" value="Submit" />
</form>
</body>

No comments: