How to create clock and print button in web page

Many people use clock at their website, so i have posted this article with sample code to create clock in html page.

You can use following example to create clock and print button n HTML page.

<!DOCTYPE html>
<head>  
<title>Create Clock and Print Button</title>  
<script type="text/javascript">  
//This is done only to make the below JavaScript code compatible to XHTML. <![CDATA[ 
var timerID = null 
var RunningTimer = false  
function stopclock(){ 
if(RunningTimer) 
RunningTimer = false 
}  
function startclock(){ 
stopclock() 
timerID = setInterval("showtime()",1) 
RunningTimer = true 
} 
function showtime(){ 
var now = new Date() 
var hours = now.getHours() 
var minutes = now.getMinutes() 
var seconds = now.getSeconds() 
var mseconds = now.getMilliseconds() 
var timeValue = "" + ((hours > 12) ? hours - 12 : hours) 
timeValue += ((minutes < 10) ? ":0" : ":") + minutes 
timeValue += ((seconds < 10) ? ":0" : ":") + seconds 
timeValue += ((seconds < 10) ? ":0" : ":") + mseconds 

timeampm = (hours >= 12) ? " P.M." : " A.M." 
document.clock.faceforclock.value = timeValue 
document.clock.faceforAMPM.value = timeampm  
} 
//]]>  
</script>  
</head>  
<body onload="startclock()">   
<h3>Clock and Print Button</h3>
<form name="clock" action="#">  
<input type ="text" name="faceforclock" size="10" value ="" />  
<input type="text" name="faceforAMPM" size="5" value ="" />   
<form>
<input onclick="window.print();return false;" type="button" value="Print" />
</form>
</form>  
</body>  
</html>

When you run the above code following result will display.

clock and print button

You can try this editor (javalaunch.com/HTML_Editor.jsp) to check the above code.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top