<html><body>
<style>
body {
background-color: #000000;
}
#clock {
font-family: sans-serif;
color: #66ff99;
font-size: 100pt;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
}
#clockdef {
font-family: sans-serif;
color: #555555;
font-size: 100pt;
text-align: center;
padding-top: 30px;
padding-bottom: 10px;
}
#clockstop {
font-family: sans-serif;
color: #77CCFF;
font-size: 100pt;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
}
</style>
<div id="clockdef"></div>
<div id="clock"></div>
<div id="clockstop"></div>
<script>
var Sdate = new Date(); /* creating object of Date class */
document.getElementById("clockdef").innerText = updateTime(Sdate.getHours()) + " : " + updateTime(Sdate.getMinutes()) + " : " + updateTime(Sdate.getSeconds());
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
//document.getElementById("clockstop").innerText = -parseInt((Sdate - date)/1000)
//document.getElementById("clockstop").innerText = -((Sdate - date)/1000).toFixed(1);
document.getElementById("clockstop").innerHTML = -parseInt((Sdate - date)/1000) + " <br><small><small>" + -parseInt((Sdate - date)/60000) + " m " + -parseInt((Sdate - date)/1000)%60 + " s<br><small><small>" + -parseInt((Sdate - date)/3600000) + " h "+ -parseInt((Sdate - date)/60000)%60 + " m " + -parseInt((Sdate - date)/1000)%60 + " s" ;
var t = setTimeout(function(){ currentTime() }, 50); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */
</script>
</body></html>