<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#txt1{
border: 1px solid #000;
background:#CC9;
width:150px;
padding: 5px 0px;
text-align:center;
font-size:60px;
}
#txt2{
border: 1px solid #000;
background:#CC9;
width:150px;
padding: 5px 0px;
text-align:center;
font-size:60px;
}
#txt3{
border: 1px solid #000;
background:#CC9;
width:150px;
padding: 5px 0px;
text-align:center;
font-size:60px;
}
p{
display:inline;
font-size:60px;
}
</style>
<script language="javascript">
function test(){
clock = new Date;
h = document.getElementById('txt1');
h.value = clock.getHours();
m = document.getElementById('txt2');
m.value = clock.getMinutes();
s = document.getElementById('txt3');
s.value = clock.getSeconds();

var style1 = document.getElementById('colum1');
var style2 = document.getElementById('colum2');

if(style1.style.visibility == 'visible' && style2.style.visibility == 'visible'){
style1.style.visibility = 'hidden';
style2.style.visibility = 'hidden';
}
else{
style1.style.visibility = 'visible';
style2.style.visibility = 'visible';
}
}
setInterval(test,1000);
</script>
</head>

<body>

<input type="text" id="txt1" value="" disabled /> <p id="colum1">:</p>
<input type="text" id="txt2" value="" disabled /> <p id="colum2">:</p>
<input type="text" id="txt3" value="" disabled />

</body>
</html>