Jump to content

timer follow the mouse


houssam_ballout
 Share

Recommended Posts

Hello all,I'd a code, its about timer, it works fine, I just want to make it follow the mouse when I enter the page?Any helpThanks in advanceThe code is:

<html><head><link rel="stylesheet" type="text/css" href="ex1.css"/><style type="text/css">div { background-color: #ccffff; size: 50pt }</style><script type="text/javascript">var second=0;var min=1;var hour=1;function start(){   window.setInterval("updatesec()",1000);}function updatesec(){	   second++;		 if(second == 60 )		 {			second= -1;			updatemin();		 }	   seconds.innerText=second;}function updatemin(){	  min++;   if(min >= 59)   {	  if(min== 59)		{		 minutes.innerText=min;		 updatesec();		}	   else		{		  updatehour();		}   }   minutes.innerText=min;   updatesec();}function updatehour(){   hour++;   hours.innerText=hour;   if(hour == 12 && min == 60 && second == -1)   {	  hour=1;	  min=-1;	  sec=-1;	  updatesec();   }	  updatesec();}</script></head><body  onload="start()"><div  style=" width: 100pt;height: 40pt"><h1><strong id="hours">1</strong>:<strong id="minutes">1</strong>:<strong id="seconds">0</strong></h1></div></body></html>

Link to comment
Share on other sites

You want the timer <div> to "follow" the mouse? Physically? Like, the mouse moves across the screen, and the timer moves with it? Or do you want the timer to start counting when the mouse enters the page? These would lead to very different answers.

Link to comment
Share on other sites

well,I want the timer that is already on the page to follow the mouse
So I think you mean the clock will move across the page. That's what I'm answering.First, your timer div needs an id or you can't access it. It also needs a style like this: {position: absolute; top: 0; left: 0} so it can move. It doesn't matter what the initial coordinates are--it's the position property that must be changed from 'static' (the default) to something else.Next, you need an "onmousemove" event-listener in your body tag or document.body element (that is, put it in the tag or let your script do it). Attach it to a function in your javascript.This function needs to capture the mouse coordinates. This page can help you with that: http://www.quirksmode.org/js/events_properties.html . It clarifies all the cross-browser problems with events and mouse coordinates. I don't know why, but IE treats both of these very differently from compliant browsers.Calculate the timer coordinates from the mouse coordinates. Then assign the timer coordinates to the div's style.top and style.left attributes. Something like myTimer.style.top = mouseY + 5;Since the document.body will signal an onmousemove event very frequently (while the mouse moves, anyway), it will call your function frequently, and this will move your div in a smooth fashion, especially since the timer is so small and contains no images.I hope this is what you want. If you can script, this should be enough help.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...