If you're needing a simple digital clock that is updating automatically and takes directly the time from the server, also you want to show the time in other count... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Step 2: Use JavaScript code below to setup the script
JavaScript
Step 3: Copy & Paste HTML code below in your BODY section
HTML
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Codice:
<style type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.clock{
cursor:pointer;
padding:5px 5px 5px 5px;
margin:5px 0 5px 0;
width:70px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
text-align:center;
font-weight: bold;
font-family: arial;
}
#clock {
background-color:#000000;
color:#00CC66;
}
#reloj {
background-color:#999999;
color:#FFFFFF;
}
#rellotje {
background-color:#237ab2;
color:#FFFFFF;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Codice:
<script type="text/javascript">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
function moveClock(idClock,startTime){//move given clock
var timeout=1000;//miliseconds to repeat the function
if ( startTime === undefined ) {//just take the browser time
rightNow = new Date();
hour = rightNow.getHours();
minute = rightNow.getMinutes();
second = rightNow.getSeconds();
}
else{//starttime set
rightNow = startTime.split(':',3);
hour = parseInt(rightNow[0],10);
minute = parseInt(rightNow[1],10);
second = parseInt(rightNow[2],10);
if (second==59){
if (minute==59){
if (hour==23) hour=0;
else hour++;
minute=0;
}else minute++;
second=0;
}else second++;
}
if (minute<10) minute= "0" + minute;
if (second<10) second= "0" + second;
currentTime=hour + ":" + minute + ":" +second;// tim to return
document.getElementById(idClock).innerHTML = currentTime;//tim for the HTML element
//recursivity
if (startTime===undefined) setTimeout("moveClock('"+idClock+"')",timeout);//browser time
else setTimeout("moveClock('"+idClock+"','"+currentTime+"')",timeout);//set time
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Codice:
Normal clock using browser time:
<div id="clock" class="clock">clock</div>moveClock("clock");<br /><br />
<hr>
Clock using server time:
<div id="reloj" class="clock">reloj</div> moveClock("reloj","< ?php echo date("G:i:s");? >");<br /><br />
<hr>
Clock with manual time:
<div id="rellotje" class="clock">rellotje</div> moveClock("rellotje","23:58:56");<br /><br />
<hr>
<script type='text/javascript'>
moveClock("clock");
moveClock("reloj","2:23:25");
moveClock("rellotje","23:58:56");
</script>