jsClock: Featured Digital Clock JavaScript

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
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
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>






 

Discussioni simili