Hallo.
ich habe folgende Aufgabe bekommen:
4.4 Mausverfolgung
Erschaffe ein Feld, das die aktuelle Uhrzeit (bei einstelligen Minuten/Stunden mit führender
Null) beinhaltet und dem Mauszeiger über den Bildschirm folgt.
Zusatz:
1. Die Uhrzeit soll sich selbständig aktualisieren.
2. Das Feld in dem die Uhrzeit ist, folgt der Maus mit einiger Verzögerung.
3. Definiere in der Mitte des Bildschirms ein 500x500 Pixel großes Feld in dem die Uhrzeit
dem Mauszeiger folgt. Verlässt der Mauszeiger diesen Bereich, soll das Feld der
Uhrzeit wieder zur Mitte laufen.
4. Teile die Uhrzeit in 2 Objekte, wovon eines die Stunden beinhaltet und das andere die MInuten und Sekunden.
ich hab jetzt das problemn ,dass sich die Uhrzeit nur dann aktuallieiert, wenn ich auch die Maus in dem 500px x 500px feld bewegen .
wie mach ich, dass die zeit sich grundsätzlich automatisch aktuallisiert??
Hier das, was ich geschrieben hab:
Vorab viele Dank fürs Helfen.
Gruß marcel
<html>
<head>
<title>Aufgabe 4.2.4</title>
<style type="text/css">
body { background-color:#FF9999;
text:#000000;
}
a:link { color:white }
a:visited { color:blue }
a:hover { color:yellow }
a:active { color:lime }
#footer { position:absolute;
bottom:20;
}
</style>
<script type="text/javascript">
function bla()
{
document.onmousemove = asd;
}
function asd()
{
var Jetzt = new Date();
var stunden = Jetzt.getHours();
var minuten = Jetzt.getMinutes();
var sekunden = Jetzt.getSeconds();
var vorsek = ( sekunden < 10 ) ? "0" : "";
var vormin = ( minuten < 10 ) ? "0" : "";
var vorstd = ( stunden < 10 ) ? "0" : "";
var std = vorstd + stunden + ":" ;
var min = vormin + minuten + ":";
var sek = vorsek + sekunden + " Uhr";
var Zeit = std
var Zeit1 = min + sek
document.getElementById("objekt1").innerHTML = Zeit
document.getElementById("objekt1").style.left = window.event.clientX +15+"px";
document.getElementById("objekt1").style.top = window.event.clientY +15+ "px";
document.getElementById("objekt2").innerHTML = Zeit1
document.getElementById("objekt2").style.left = window.event.clientX +35+"px";
document.getElementById("objekt2").style.top = window.event.clientY +15+ "px";
}
function weg()
{
document.onmousemove = fgh;
}
function fgh()
{
var text2 = "";
document.getElementById("objekt1").innerHTML = text2
document.getElementById("objekt1").style.left = window.event.clientX +15+"px";
document.getElementById("objekt1").style.top = window.event.clientY +15+ "px";
document.getElementById("objekt2").innerHTML = text2
document.getElementById("objekt2").style.left = window.event.clientX +35+"px";
document.getElementById("objekt2").style.top = window.event.clientY +35+ "px";
}
</script>
</head>
<body>
<form name="Formular" action="">
<div id="Rahmen" style="position:absolute; left:25%; top:20%; width:500px; height:500px; border-width:1px;
border-color:black; border-style:solid; background-color:#FFFFFF" align= "center"
onmousemove="bla()"
onmouseout="weg()"
>
<br><center>Hier mit der Maus rein und eine Uhr erscheint</center>
</div>
<div id="objekt1" style="position:absolute; left:330px; top:330px; width:10px; height:10px; border-width:0px;
border-color:black; border-style:solid; background-color:none" align="center"></div>
<div id="objekt2" style="position:absolute; left:350px; top:330px; width:65px; height:10px; border-width:0px;
border-color:black; border-style:solid; background-color:none" align="center"></div>
<center><br><h1><u>Mausverfolgung</u></h1>
Hier seht ihr eine Mauszeigerverrfolgung</center>
<a id="footer" href="../HTML/Startseite.html" target="Daten"><b>zur Startseite<br></b></a><br>
</form>
</body>
</html>