Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 792

Aug 10th, 2009

I want put a clock on my page

Expand Post »

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

(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>

Similar Threads

Can I use a template html page within another html page in Site Layout and Usability
do I need to put keyword tag on every single page? in Search Engine Optimization
to display the running time as clock in page in PHP
Can we put 2 buttonlink in only 1 page in ASP.NET
Align floated images in center of page with CSS in HTML and CSS

polo_coins

Reputation Points: 8

Solved Threads: 0

Junior Poster in Training

Offline

63 posts
since Oct 2008

Permalink

Aug 10th, 2009

Re: I want put a clock on my page

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

polo_coins

Reputation Points: 8

Solved Threads: 0

Junior Poster in Training

Offline

63 posts
since Oct 2008

Permalink

Aug 10th, 2009

Re: I want put a clock on my page

Hope this little code will help you:

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.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Aug 19th, 2009

Re: I want put a clock on my page

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

fuego2008

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

13 posts
since Aug 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: how to change id by adding new row..

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Exception handling statement.

DaniWeb Message

Cancel Changes

User Name
Password