...

View Full Version : JS Timer



Hydrian
08-26-2012, 04:50 AM
I made this timer. You can adjust the timer by changing


setTimeout('digital_clock()', 500)
( iv set it at 500 but you can change it to 1000 or what ever)

Full javascript


<script type="text/javascript">
function digital_clock()
{
var date=new Date()
var hours=date.getHours()
var minutes=date.getMinutes()
var seconds=date.getSeconds()
minutes=addZero(minutes)
seconds=addZero(seconds)
document.getElementById('hours')
.innerHTML = hours
document.getElementById('minutes')
.innerHTML = minutes
document.getElementById('seconds')
.innerHTML = seconds
setTimeout('digital_clock()', 500)
}
function addZero(min_or_sec)
{
if (min_or_sec < 10)
{min_or_sec="0" + min_or_sec}
return min_or_sec
}
</script>


Html to make it work and display



<body onload="digital_clock()">
<h1>Time.</h1>
<div id="wrap">
<div id="digital-clock">
<ul>
<li id="hours"></li>
<li> :</li>
<li id="minutes"></li>
<li> :</li>
<li id="seconds"></li>
</ul>
</div>
</div>
</body>


Just to make it look pretty the style sheet.



<style type="text/css">
body,
html {
background:#eee url(/resources/images/bg.gif);background-repeat: repeat-x;
}
body {
padding:0 15px 15px;margin-top:15px;
color:#222;
}
#wrap {
position: relative;
}
#digital-clock {
border:1px solid #fff;
width:7em;
}
#digital-clock ul {
margin:0;
padding:0.1em;
background:#003366;
color:#FFF;
list-style-type:none;
text-align:center;
}
#digital-clock li {
display:inline;
padding:0;
margin:0;
}
</style>


Hope you enjoy

A example of what it will look like http://i.imgur.com/utqdU.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum