Antworten auf deine Fragen:
Neues Thema erstellen

Javascript - Bildwechsel nach Uhrzeit

Soulhuntress

Soulhuntress

Noch nicht viel geschrieben

Ich brauch mal wieder Hilfe von erfahrenen Codern (zumindest erfahreneren als ich einer bin) :D

Ich würde gerne folgendes machen:
Ein Banner auf meiner Site (in einer Tabellenzelle) soll sich je nach Tageszeit verändern. So soll zum Beispiel zwischen 5 und 6 Uhr ein Sonnenaufgang gezeigt werden, zur Mittagszeit ein Bild mit einer hoch stehenden Sonne, etc.
Insgesamt sind es 12 Bilder (also für tagsüber 6 und für die Nacht weitere 6).
Die Bilder müssen nicht automatisch wechseln, es reicht schon, wenn sie sich nach einem Neuladen der Seite verändern.
Könnte es dabei Probleme bei Usern geben, die nicht das 24-Stunden-System verwenden und könnte man so ein potentielles Problem umgehen?

Nachdem ich das Forum durchsucht habe und nicht wirklich etwas finden konnte was mir hilft und auch per Google eigentlich fast nur Scripte fand, die nur zwei Bilder (Tag und Nacht) verwenden, stelle ich euch nun die Frage:
Wie setzt man das mit Javascript am besten um?
 

C

ChrisvA

Aktives Mitglied

AW: Javascript - Bildwechsel nach Uhrzeit

Man kann mit Javaskript sehr einfach die Uhrzeit abfragen, (glaube die vom PC), schau dir dazu mal folgende Seite an:
JavaScript Date and Time Functions
Dann muss man je nach Stunde den Link vom Bild ändern.
Allerdings währe auch eine Lösung mit PHP denkbar. Dann würde man allerdings auf jeden Fall die Serverzeit benutzen.
Probleme mit Ländern, die nicht das 24h Zeitsystem benutzen dürfte es nicht geben, da der PC ja für getHours() immmer Zahlen zwischen 0 und 23 ausspuckt. Denn intern rechnen ja alle PC in 24h bei beispielsweise Engländern ist es dann nur so, dass die Zeit eben anders ausgegeben wird.
 
Soulhuntress

Soulhuntress

Noch nicht viel geschrieben

AW: Javascript - Bildwechsel nach Uhrzeit

Danke schon mal, ihr zwei.

@sokie
Also wäre das dann z.B. statt
Code: 
if (Std >= 5 && Std < 12) {
  alert("Guten Morgen!");
dann
Code: 
if (Std >= 5 && Std < 12) {
  document.write('<img src="bild.gif">');
wenn mich nicht alles täuscht?
 
L

lostboi

Nicht mehr ganz neu hier

AW: Javascript - Bildwechsel nach Uhrzeit

PHP: 
if (Std >= 5 && Std < 12)  {
  document.getElementById('header').innerHTML = '<img src="bild.gif">';
}
Damit würdest Du das Bild direkt in die Tabellenzelle setzen, welche die id "header" hat.
Alternativ kannst Du das ganze auch über verändern der Style Eigenschaften der entsprechenden Zelle machen.

Edit:

Für den von Dir beschriebenen Fall bietet es sich allerdings an das ganze beim Erzeugen der Seite, also im PHP Code, durchzuführen.
Der Einfachheit halber kannst Du z.B. ein eigenes CSS Stylesheet für den Header machen, wo Du nur die möglichen Bilder hinterlegst.
Dieses wird ganz normal mit eingebunden in Deine Seite und per PHP Code setzt Du, je nach Uhrzeit, die entsprechende CSS ID oder Klasse.
Das selbe kannst Du natürlich nach dem laden der Seite auch mit JavaScript machen. Wobei letzteres zu keinem Ergebnis führt, wenn der Besucher JS deaktiviert hat.
 
Zuletzt bearbeitet:
Soulhuntress

Soulhuntress

Noch nicht viel geschrieben

AW: Javascript - Bildwechsel nach Uhrzeit

Danke, Lostboi!

Klar, CSS und PHP wäre natürlich auch eine Möglichkeit, aber damit kenne ich mich leider noch kaum aus (abgesehen vom rumbasteln am eigenen Forenstyle). Deswegen wollte ich erst einmal den Weg des für mich geringsten Wiederstandes namens Javascript nehmen :D
 
sokie

sokie

Mod | Web

AW: Javascript - Bildwechsel nach Uhrzeit

Soulhuntress schrieb:
Danke schon mal, ihr zwei.

@sokie
Also wäre das dann z.B. statt
Code: 
if (Std >= 5 && Std < 12) {
  alert("Guten Morgen!");
dann
Code: 
if (Std >= 5 && Std < 12) {
  document.write('<img src="bild.gif">');
wenn mich nicht alles täuscht?
Zum Vergrößern anklicken....

ja, so sieht das aus :)

damit du nicht den ganzen code für jeden Fall notieren musst, ginge es auch zB so:

HTML: 
<script type="text/javascript">
var bild = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 5 && Std < 12) {
  bild = "morgen.jpg";
} else if (Std >= 12 && Std < 18) {
  bild = "tag.jpg";
} else if (Std >= 18 && Std <= 23) {
  bild = "abend.jpg";
} else if (Std >= 0 && Std < 5) {
  bild = "nacht.jpg";
}
document.write('<img src="ordnername/' + bild + '" />');
</script>
 
Zuletzt bearbeitet:
Soulhuntress

Soulhuntress

Noch nicht viel geschrieben

AW: Javascript - Bildwechsel nach Uhrzeit

Ich hab deinen Code jetzt einmal ausprobiert, aber da stimmt etwas noch nicht so ganz.
Also bei mir sieht das nun folgendermaßen aus:

HTML: 
<script type="text/javascript">
var bild = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 6 && Std < 10) {
  bild = "day1.png";
} else if (Std >= 10 && Std < 12) {
  bild = "day2.png";
} else if (Std >= 12) {
  bild = "highnoon.png";
} else if (Std >= 12 && Std < 16) {
  bild = "day3.png";
} else if (Std >= 16 && Std < 19) {
  bild = "day4.png";
} else if (Std >= 19 && Std < 21) {
  bild = "night1.png";
} else if (Std >= 22 && Std <= 23) {
  bild = "night2.png";
} else if (Std >= 24) {
  bild = "midnight.png";
} else if (Std >= 1 && Std < 3) {
  bild = "night3.png";
} else if (Std >= 4 && Std < 5) {
  bild = "night4.png";
}
document.write('<img src="http://www.psd-tutorials.de/modules/Forum/images/uhr/' + bild + '" />');
</script>

Jetzt (14:10 Uhr) sollte eigentlich das Bild "day3.png" angezeigt werden, es bleibt aber bei dem Mittagsbild "highnoon.png". Vermutlich liegt es an else if (Std >= 12) aber wie kann ich sonst einstellen, dass dieses Bild nur im Zeitraum von 12 Uhr Mittags angezeigt wird?


Edit: das Tabellenproblem unten hat sich - wie auch immer - von selbst gelöst.
Und noch ein kleines Problem ist im IE aufgetreten: während in Firefox und GoogleChrome die Tabelle noch richtig angezeigt wird, wird sie im IE höher, obwohl eine Feste Zahl angegeben wurde (td height="102") und die "Tagesbilder" diese Höhe auch nicht überschreiten.
Jemand eine Ahnung, wie das kommt?
 
Zuletzt bearbeitet:
L

lostboi

Nicht mehr ganz neu hier

AW: Javascript - Bildwechsel nach Uhrzeit

PHP: 
} else if (Std >= 10 && Std < 12) {
  bild = "day2.png";
} else if (Std >= 12) {
  bild = "highnoon.png";
} else if (Std >= 12 && Std < 16) {

Es müsste heißen:

PHP: 
} else if (Std == 12) {
  bild = "highnoon.png";
}

Denn sonst greift dieser Zweig immer wenn die Stunde größer als 12 ist und die anderen Möglichkeiten werden nie erreicht.
 
Duddle

Duddle

Posting-Frequenz: 14µHz

AW: Javascript - Bildwechsel nach Uhrzeit

Nur der Vollständigkeit halber, hier ein passendes Tutorial zum Thema, von mir verfasst:



Duddle
 
Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

AW: Javascript - Bildwechsel nach Uhrzeit

Für alle wie mich die es via css machen wollen hier der Code für CSS:

Code: 
<script type="text/javascript">
var css = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 5 && Std < 12) {
  css = "morgen.css";
} else if (Std >= 12 && Std < 18) {
  css = "mittag.css";
} else if (Std >= 18 && Std <= 23) {
  css = "abend.css";
} else if (Std >= 0 && Std < 5) {
  css = "nacht.css";
}
document.write('<link rel="stylesheet" type="text/css" href="' + css + '" />');
</script>
 
Zuletzt bearbeitet:
D

Dragoni25

Guest

AW: Javascript - Bildwechsel nach Uhrzeit

bei mir hat das leider net geklappt. wenn ich ' + css + ' durch den namen ersetze geht es aber so lecider niht. ihrgendwie ist da der wurm drin :(

{literal}<script type="text/javascript">
var css = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 7 && Std < 20) {
css = "tag.css";
} else if (Std >= 20 && Std < 7) {
css = "nacht.css";
}
document.write('<link rel="stylesheet" type="text/css" href="css/standard/' + css + '" />');
</script>{/literal}
Zum Vergrößern anklicken....
Vieleicht kann mir da jemand helfen.

lg
Dragon
 
Zuletzt bearbeitet von einem Moderator:
sokie

sokie

Mod | Web

AW: Javascript - Bildwechsel nach Uhrzeit

dein Script sagt:
Code: 
else if (Std >= 20 && Std < 7) {
  css = "nacht.css";
}
(anderenfalls) wenn Std grösser oder gleich 20 ist UND dabei kleiner als 7...

es gibt keine Zahl, die grösser als 20 und dabei kleiner als 7 wäre.
 
D

Dragoni25

Guest

AW: Javascript - Bildwechsel nach Uhrzeit

hm habs nun so versucht aber da klappt es auch nicht. Als ob der erstgarnicht die css hätte :(

Code: 
<script type="text/javascript">
var css = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 7 || Std < 20) {
  css = "tag.css";
} else if (Std >= 20 || Std  < 6) {
  css = "nacht.css";
} 
document.write('<link rel="stylesheet" type="text/css" href="<link rel="stylesheet" type="text/css" href="css/' + css + '" />');
</script>
 
D

Dragoni25

Guest

AW: Javascript - Bildwechsel nach Uhrzeit

nachteilig ist es ist ein browsergame was wir grade entwickeln. Dafür müsstes du dich erst registrieren um es dann sehn zu können :) Wobei wir das eigendlich noch nicht öffendlich haben.;)
 
D

Dragoni25

Guest

AW: Javascript - Bildwechsel nach Uhrzeit

Hab dir mal den Quellcode raus kopiert. so sieht es im Quellcode aus


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Server 1</title>
<link rev="made" href="[EMAIL="dragon4048@web.de"]mailto:dragon4048@web.de[/EMAIL]">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="ROBOTS" content="ALL">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<link href="" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
var css = "";
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 7 || Std < 20) {
  css = "tag.css";
} else if (Std >= 20 || Std  < 6) {
  css = "nacht.css";
} 
document.write(<link rel="stylesheet" type="text/css" href="css/' + css + '" />');
</script>

<style type="text/css">
<!--
body {
    background-image: url(images/bg.png);
}
-->
</style>

<div align='center'><img align="center"src='' width='90%' height='120'>

<!-- <div class="werbung"></div> -->

</div></center>
</head>

</head>
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 151 (Mitglieder: 1, Gäste: 150)
Robots: 904

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben