AJAX

I want put a clock on my page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2008

Posts: 63

Reputation: polo_coins is an unknown quantity at this point

Solved Threads: 0

polo_coins polo_coins is offline

Offline

Junior Poster in Training

I want put a clock on my page

Aug 10th, 2009

I wrote code below it open me a new window and show current time but I want it will show it in same window and chnge each second

here is my code (i think I must use setInterval function to change time each second but if I put the call in body it's still have problem

Help with Code Tags

(Toggle Plain Text)

<img  onmouseover="myFunction()" />
</table>






<script type="text/javascript">
function myFunction()
{
var n=new Date();
//alert("document.write(now.getHours() + "."+now.getMinutes()+"."+now.getSeconds())");

document.write(n.getHours()+":"+n.getMinutes()+":"+n.getSeconds());

}
</script>

•

Join Date: Oct 2008

Posts: 63

Reputation: polo_coins is an unknown quantity at this point

Solved Threads: 0

polo_coins polo_coins is offline

Offline

Junior Poster in Training

Re: I want put a clock on my page

Aug 10th, 2009

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script language="JavaScript" type="text/javascript">
 
function curTime()
{
var now=new Date()
var hrs=now.getHours()
var min=now.getMinutes()
var sec=now.getSeconds()
var don="AM"
if (hrs>=12){ don="PM" }
if (hrs<10) { hrs="0"+hrs }
if (min<10) { min="0"+min }
if (sec<10) { sec="0"+sec }
clock.innerHTML=hrs+":"+min+":"+sec+" "+don
setTimeout("curTime()",1000)
}
 
</script>
<script language="JavaScript" type="text/javascript">

function curTime()
{
var now=new Date()
var hrs=now.getHours()
var min=now.getMinutes()
var sec=now.getSeconds()
var don="AM"
if (hrs>=12){ don="PM" }
if (hrs<10) { hrs="0"+hrs }
if (min<10) { min="0"+min }
if (sec<10) { sec="0"+sec }
clock.innerHTML=hrs+":"+min+":"+sec+" "+don
setTimeout("curTime()",1000)
}

</script>

this is a code for perfect watch ,you must put a call in <body> tag
and use <span> tag to locate it on a page

•

Join Date: Aug 2006

Posts: 319

Reputation: Luckychap is on a distinguished road

Solved Threads: 42

Luckychap

Offline

Posting Whiz

Re: I want put a clock on my page

Aug 10th, 2009

Hope this little code will help you:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
	<style>
	  div#clock {
	   position: absolute;
	   border: 2px solid ccc;
	   background-color: c0f;
	   text-color: 000;
	   width: auto;
	   right: 2%;
	  }
	</style>
 
	<script language="javascript">
	var clockDiv;
 
	function initiateClock() {
		clockDiv = document.getElementById('clock');
		if(!clockDiv) return;
 
		updateClock();
		setInterval(function(){updateClock();}, 1000);
	}
 
	function updateClock() {
		var time = new Date();
		var sep = ":";
		var timeStr = (time.getHours() < 10 ? "0" + time.getHours() : (time.getHours() > 12) ? time.getHours() - 12 : time.getHours()) + sep + 
					  (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + sep +
	                  (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()); 
 
		clockDiv.innerHTML = timeStr;
	}
	</script>
</head>
	<body onload='initiateClock();'>
		<div id='clock'></div>
	</body>
</html>
<html>
<head>
	<style>
	  div#clock {
	   position: absolute;
	   border: 2px solid ccc;
	   background-color: c0f;
	   text-color: 000;
	   width: auto;
	   right: 2%;
	  }
	</style>

	<script language="javascript">
	var clockDiv;
	
	function initiateClock() {
		clockDiv = document.getElementById('clock');
		if(!clockDiv) return;
		
		updateClock();
		setInterval(function(){updateClock();}, 1000);
	}
	
	function updateClock() {
		var time = new Date();
		var sep = ":";
		var timeStr = (time.getHours() < 10 ? "0" + time.getHours() : (time.getHours() > 12) ? time.getHours() - 12 : time.getHours()) + sep + 
					  (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + sep +
	                  (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()); 
					  
		clockDiv.innerHTML = timeStr;
	}
	</script>
</head>
	<body onload='initiateClock();'>
		<div id='clock'></div>
	</body>
</html>

Last edited by Luckychap; Aug 10th, 2009 at 3:30 pm.

When you think you have done a lot, then be ready for YOUR downfall.

•

Join Date: Aug 2009

Posts: 12

Reputation: fuego2008 is an unknown quantity at this point

Solved Threads: 1

fuego2008

Offline

Newbie Poster

Re: I want put a clock on my page

Aug 19th, 2009

There is a nice tutorial about JS clock in this link, I hope it would have good use for you:

http://sites.google.com/site/superco...vascript_clock

cheers,
fuego