tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Quaese
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
811
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 23.12.08 12:34 #1
    Na_dine Na_dine ist offline Mitglied Silber
    Registriert seit
    Sep 2007
    Beiträge
    62
    Hallo,
    ich möchte in meine html-Seite einen <Div> einbauen, der in regelmäßigen Zeitabständen (alle 60Sekunden) den Inhalt wechselt!
    Der DIV Container heißt Countdown und ist im Body.
    Die JS-function count() rufe ich im öffnenden body-tag auf mit onload.

    Soweit funktioniert alles bis zur anzeige des ersten Hintergrundbildes.
    Nach einer Minute wird dies ausgeblendet und leider nichts mehr angezeigt
    Die Schreibweise der Bilder habe ich schon überprüft.
    Der Fehler könnte in der ersten else if Schleife ( else if (start <= 169) ) stecken, da hier der Editor den Quelltext nicht mehr schwarz, sondern auf einmal blau anzeigt...

    einen Fehler finde ich aber leider nicht und bräuchte deswegen eure Hilfe ....

    schon mal vielen Dank für alle Tipps und Anregungen!!
    Gruß, Nadine

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <script type="text/javascript">
var div = document.createElement("div");
    div.setAttribute("id","MainItem");
 
        div.style.position="relative";
    div.style.left="200px";
    div.style.top="200px";
    div.style.width="230px";
    div.style.height="210px";
 
 
var start = 180;
var aktiv = setInterval("count()", 1000);
 
function count()
{
start--;
if(start >= 120)
    {
    document.getElementById("Countdown").appendChild(div);
    div.style.backgroundImage="url(Bild1.jpg)";
    }
 else if (start <= 119)
    {
    document.getElementById("Countdown").appendChild(div);
    div.style.backgroundImage="url(Bild2.jpg)";
    }
 
 else if (start <= 60)
    {
    document.getElementById("Countdown").appendChild(div);
    div.style.backgroundImage="url(Bild3.jpg)";
    }
}
</script>
     
    Zitieren Zitieren
  2. 23.12.08 17:46 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    du hängst jede Sekunde ein DIV ein und weist diesem ein Hintergrundbild zu.

    Viel eleganter wäre es doch, das Element nur einmal anzulegen und einzuhängen. Alle 60 Sekunden muss dann nur noch das Hintergrundbild getauscht werden.

    Beispiel:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var arrBilder = new Array("bild1.jpg",
                          "bild2.jpg",
                          "bild3.jpg");
 
 
window.onload = function(){
  div = document.createElement("div");
  div.setAttribute("id","MainItem");
 
  div.style.position="relative";
  div.style.left="200px";
  div.style.top="200px";
  div.style.width="230px";
  div.style.height="210px";
 
  // Ausgangsbild zuweisen
  div.style.backgroundImage = "url("+arrBilder[0]+")";
 
  // Bild-DIV einhängen
  document.getElementById("Countdown").appendChild(div);
 
  // Index-Zähler
  intCount = 1;
  aktiv = setInterval(function(){count();}, 60000);
}
 
function count(){
  // Neues Hintergrundbild und Zähler inkrementieren
  div.style.backgroundImage = "url("+arrBilder[intCount++]+")";
 
  // Falls der Zähler den gültigen Bereich verlassen hat -> zurücksetzen
  if(intCount == arrBilder.length)
    intCount = 0;
}
 
//-->
</script>
</head>
<body>
<div id="Countdown"></div>
<button onclick="window.clearInterval(aktiv);">clear</button>
</body>
</html>

    Vielleicht kannst du damit etwas anfangen.

    Ciao
    Quaese
    Na_dine bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 30.12.08 17:04 #3
    Na_dine Na_dine ist offline Mitglied Silber
    Registriert seit
    Sep 2007
    Beiträge
    62
    Ah super danke,
    stecke noch in den Kinderschuhen der Javascript, aber dein Beitrag hat mir super weitergeholfen!
    Vielen Dank
    Nadine
     
    Zitieren Zitieren
« Per JavaScript HTML-Elemente (Text, Steuerelemente, Bilder, etc.) kopieren | req.responseText in innerHTML schreiben »

Ähnliche Themen

  1. W-Lan unterbricht regelmäßig - WinXP
    Von MiRaMC im Forum Microsoft Windows
    Antworten: 2
    Letzter Beitrag: 05.06.08, 08:31
  2. Applikation regelmäßig starten
    Von insertcoin im Forum Java
    Antworten: 2
    Letzter Beitrag: 05.10.07, 12:20
  3. Datei(en) regelmäßig suchen und löschen
    Von CoderX im Forum Visual Basic 6.0
    Antworten: 3
    Letzter Beitrag: 26.09.05, 19:19
  4. JTable regelmäßig aktualisieren
    Von lotharr im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 16.09.05, 15:04
  5. Per PHP regelmäßig ein Frame ändern
    Von fiacyberz im Forum PHP
    Antworten: 1
    Letzter Beitrag: 16.02.04, 05:01

Stichworte