Achtergrondwissel per seizoen, javascript

Status
Niet open voor verdere reacties.
J

jebl

Gebruiker
Lid geworden
8 dec 2011
Berichten
109
Hallo,

Het volgende kom ik niet uit n.l. op mijn website wil ik de achtergrond per seizoen laten wisselen.
Hier heb ik een javascript voor gevonden maar krijg het niet werkend.
Wie zou hier voor mij naar willen kijken om te zien waar het probleem zit?
Ik gebruik onderstaande code en script.
HTML: 
<html>
<head> 
<script> 
function setHeader() {

var today = new Date(); 
var month = today.getmonth()+1; 
var day = today.getDate(); 
var season ='images/header.jpg'; 
var headerImage = document.getElementById( "header");

if (month<=11 && day <21) season ='images/layout/achtergr_lente.jpg'; 
if (month<=8 && day <21) season ='images/layout/achtergr_zomer.jpg'; 
if (month<=5 && day <21) season ='images/layout/achtergr_herfst.jpg'; 
if (month<=2 && day <21)¦¦(month=11 && day>20)) 
season ='images/layout/achtergr_winter.jpg';

headerImage.src = season; 
} 
</script> 
</head>

<body> 
... 
<img id='header' src='images/header.jpg'> 
<script> setHeader(); </script> 
... 
</body>

</html>
In de map "images/layout/" staan de 4 afbeeldingen.
Alvast bedankt voor het meedenken.

Groet, Jebl
 
Laatst bewerkt door een moderator:
Dag jebl !

In bijlage een werkbaar bestand met very basic code.
Pak de 5 bestanden uit in dezelfde folder en het zou moeten werken...
Die code kan je misschien gebruiken om verder uit te werken volgens je eigen behoefte.

Grtz,
MDN111.
 

Bijlagen

  • 150129033707-76804.zip
    47,7 KB · Weergaven: 23
Hoi MDN111,

Allereerst bedankt voor het meedenken :thumb:
Misschien heb ik het niet duidelijk genoeg omschreven maar het is de bedoeling dat de verschillende seizoenen
automatisch wisselen op de datum dat het seizoen begint.
Wellicht is dit ook met jou oplossing mogelijk maar ik ben niet zo thuis in java :eek:, ik begrijp in ieder geval niet
waarom ik een datum moet invoeren.

Groet, Jebl
 
Nogmaals dag jebl !

Je exacte bedoeling kon ik niet direct uit je code afleiden. Je spreekt over achtergrondfoto's en over headers. Dat was mij niet duidelijk. Ik dacht dat je vooral op zoek was naar een algoritme om het seizoen te bepalen op basis van een datum (in jouw geval de datum van vandaag). Om het te kunnen testen heb ik dus iets eenvoudigs gemaakt om het seizoen te bepalen op basis van een in te voeren datum.

Ik heb nu jouw code (setHeader()) aangepast zodat het fotobestand gekozen wordt op basis van de datum van vandaag. In die vorm kan ik dat uiteraard niet testen (dat kan slechts op 21 maart, 21 juni, enz... :).

Probeer dat eens, als je wil.

Code: 
<script>

function setHeader() {
    var today = new Date(); 
    document.getElementById("header").src = getImageFile(getCurrentSeason(today));
} 


/***
* Deze functie geeft het seizoen (eerste letter) op basis van de datum (object) dat als parameter doorgegeven wordt.
*/
function getCurrentSeason(myDate) {

    // De array a heeft 12 elementen. Eén element per maand. Ieder element bevat het seizoen dat met die
    // maand overeenstemt. Er zijn dus 4 maanden met twee seizoenen. We gebruiken slechts de eerste
    // letter van het seizoen (kwestie van luiheid).
    var a = ["W","W","WL","L","L","LZ","Z","Z","ZH","H","H","HW"];

    // Als er in de betreffende maand slechts één seizoen bestaat, dan geven we het seizoen terug dat in het
    // het overeenkomstig array-element staat.
    if (a[myDate.getMonth()].length == 1) {
        return a[myDate.getMonth()]
    }

    // Als er in de betreffende maand twee seizoenen bestaan, dan moeten we kijken of de datum voor of
    // na de 21ste valt. Valt de datum voor de 21ste, dan geven we het seizoen terug dat als eerste in
    // het array-element staat. Vanaf een datum gelijk aan of na de 21ste, geven we het seizoen terug 
    // dat als tweede in het array-element staat.
    else {
        if (myDate.getDate() < 21) {
            return a[myDate.getMonth()].substr (0, 1)
        }
        else {
            return a[myDate.getMonth()].substr (1, 1)
        }
    }
}

/***
* Deze functie geeft het "fotobestand" op basis van het seizoen, waarvan de eerste letter als parameter doorgegeven wordt.
*/
function getImageFile(seizoen) {
    if (seizoen == "L") {return "images/layout/achtergr_lente.jpg";}
    if (seizoen == "Z") {return "images/layout/achtergr_zomer.jpg";}
    if (seizoen == "W") {return "images/layout/achtergr_winter.jpg";}
    if (seizoen == "H") {return "images/layout/achtergr_herfst.jpg";}
}

</script>

Grtz,
MDN111.

P.S. Java is geen Javascript !
 
Hoi MDN111,

Ik krijg het niet werkend :(
Jouw script heb ik opgeslagen in de map "js" als "background.js", in de body van de pagina heb ik deze regel gezet, "<script src="js/background.js" type="text/javascript"></script>"
Zo zou het toch moeten werken?
 
Dag jebl !

De code opslaan in een .js-file is OK. Die code bevat drie functies, maar dat zijn "function declarations". Er is dan nog geen aanroep naar een functie geweest. De verwijzing naar de .js-file mag in de <head> van het html-document staan, maar ook in de <body>. De aanroep naar setHeader() moet in de body staan, juist voor de end tag </body>.

In de bijlage vind je "test_seizoenswissel.html", samen met de subfolders zoals jij die gespecifieerd hebt. Die configuratie heb ik getest en ze werkt.

Grtz,
MDN111.
 

Bijlagen

  • TestForum.zip
    50,4 KB · Weergaven: 31
Oké, tot zover werkt het :thumb:
Alleen nu heb ik nog 1 probleempje n.l. het is nu geen achtergrond en dat is wel de bedoeling.
 
In je html-code staat een <img>-tag en die heb ik gewoon overgenomen. Dat is dus geen background.
Bijgevoegd een nieuwe bijlage, aangepast voor de background image van de body.

Grtz,
MDN111.
 

Bijlagen

  • TestForum.zip
    50,5 KB · Weergaven: 22
Laatst bewerkt:
Gewoon ter informatie aan de TS: je kan in JS ook gewoon kijken of een date-object binnen een bepaalde range valt. Daardoor zou je dus ook iets als het onderstaande kunnen schrijven:

[cpp]
var date = new Date();
var year = date.getYear();
var dates = [[new Date("21/3/" + year), new Date("21/6/" + year)], [new Date("21/6/" + year), new Date("21/9/" + year)], [new Date("21/9/" + year), new Date("21/12/" + year)]];
var backgrounds = ["images/layout/achtergr_winter.jpg", "images/layout/achtergr_lente.jpg", "images/layout/achtergr_zomer.jpg", "images/layout/achtergr_herfst.jpg"];

var index = 0;
for (var pos = 0; pos < dates.length; ++pos) {
if (date >= dates[pos][0] && date < dates[pos][1]) {
index = pos + 1;
break;
}
}

// backgrounds[index] geeft nu de juiste achtergrond
[/cpp]
 
@CoD_NL,

Omdat jou invalshoek op het probleem kortere code oplevert, vond ik interessant om ze even te ontleden. Jammer genoeg werkt ze niet. Er zitten namelijk volgende fouten in:

  • lijn 2 : De methode getYear() levert alleen bij IE de waarde "2015" op. Bij Chrome en Firefox is dat "115".
  • lijn 3 : Als men een nieuw date-object creëert met een initiële waarde dan moet de maand eerst komen. Dus Date("3/21/" + year) in plaats van Date("21/3/" + year).
  • lijn 8 : Het eerste deel van de voorwaarde is "date >= dates[pos][0]". Alle waarden in de array "dates" liggen echter in de toekomst, zodat aan het eerste deel maar kan voldaan worden vanaf 21 maart.


Grtz,
MDN111.
 
@MDN111:

Ik had de code zo uit mijn hoofd geschreven en alleen even getest of ik het juiste resultaat kreeg (momenteel winter). Maar nu ik de code na je feedback nog eens bekijk zitten er inderdaad nog een paar foutjes in:

lijn 2: vervang de aanroep van getYear() met getFullYear()
lijn 3: dat is inderdaad de juiste manier
lijn 8: als je nog even goed naar de code kijkt zie je dat dit met opzet zo is gedaan (immers blijft alleen de winter over wanneer een datum niet in de lente/zomer/herfst valt). De array backgrounds heeft op de eerste positie (index = 0) de achtergrond van de winter staan en wanneer in de for-loop aan een conditie wordt voldaan wordt pos + 1 de nieuwe waarde van index (welke dan de waarde 1 t/m 3 kan hebben).
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan