[Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana

Dany_ct

Nuovo Utente
22 Feb 2017
6
1
3
29
Salve a tutti. Premettendo che sono un neofita riguardo il mondo della programmazione web, sto sviluppando un sito internet per una web radio della quale sono membro da anni. Grazie all'ausilio di qualche concetto basilare appreso anni fa riguardo html e css, nonché di una grande forza di volontà e motivazione, sono riuscito a buttare giù un bel po' di righe di codice, tanto da creare un qualcosa di obiettivamente abbastanza carino, tuttavia da giorni mi sto arrovellando il cervello nel vano tentativo di scrivere/trovare su internet uno script (possibilmente non php, in quanto m'interessa gestire il tutto dal lato client e non sono neanche sicuro che il server lo supporti) che possa consentirmi di cambiare un'immagine (nella fattispecie delle locandine raffiguranti i vari format radiofonici) sulla base di un determinato giorno della settimana e di una determinata ora del suddetto. Esempio: 1.jpg dalle 21:30 alle 23:30 del lunedì, 2.jpg dalle 21:40 alle 23:50 del martedì, 3.jpg dalle 15:00 alle 17:00 del sabato, 4.jpg dalle 17:30 alle 18 del sabato etc. Inoltre, se possibile, avrei anche la necessità di far si che una tra le immagini che devo inserire compaia in un determinato giorno ed in una determinata ora ogni due settimane (una settimana si ed una no, per intenderci).
Posso ben immaginare che non siano ben accette richieste di codice senza aver quantomeno postato quanto si è riusciti a fare, ma purtroppo, confuso da quanto di non funzionante trovato su internet, non ho la più pallida idea di come realizzare questo script, e sinceramente non trovo corretto fare un copia/incolla a caso da internet per dar dimostrazione dell'impegno profuso fino ad ora, quindi mi trovo qui, a chiedervi, se possibile, un aiuto, possibilmente con un esempio pratico, perché ahimè, non sono ancora in grado di cogliere suggerimenti, bensì avrei bisogno di un esempio "bello e pronto". Grazie mille in anticipo a chiunque proverà ad aiutarmi.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.244
322
83

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, posta la prova che hai fatto e specifica cosa non funziona.
 

Dany_ct

Nuovo Utente
22 Feb 2017
6
1
3
29

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lo script postato da Max1 dice di mettere un name all'immagine non un id
la prossima volta posta direttamente il codice con un copia incolla che si legge più facilmente.
 

Dany_ct

Nuovo Utente
22 Feb 2017
6
1
3
29
lo script postato da Max1 dice di mettere un name all'immagine non un id
la prossima volta posta direttamente il codice con un copia incolla che si legge più facilmente.
Ho usato un id perchè l'ambiente di sviluppo che sto utilizzando (NetBeans IDE) mi segnala che "name" è un'attributo obsoleto e che andrebbe sostituito con "id", ma utilizzando "name" al posto di "id" il risultato è il medesimo, lo script non mi funziona, l'ho provato e riprovato :(
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
se vuoi usare l'id devi usare getElementById()
HTML:
<html>
    <head>
        <Title> File di esempio </title>
        <script language="JavaScript">
            function apri(conta) {
                nuovo = new Array("img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg",
                        "img5.jpg", "img6.jpg", "img7.jpg", "img8.jpg", "img9.jpg",
                        "img10.jpg", "img11.jpg", "img12.jpg", "img13.jpg", "img14.jpg"
                        , "img15.jpg", "img16.jpg", "img17.jpg", "img18.jpg", "img19.jpg"
                        , "img20.jpg", "img21.jpg", "img22.jpg", "img23.jpg")
                document.getElementById("galle").src = nuovo[conta]
            }
            function avvia() {
                data = new Date();
                ora = data.getHours();
                apri(ora);
            }
        </script>
    </head>
    <body onLoad= "avvia()">
        <img src="http://www.webfract.it/GUIDA/img1.jpg" id="galle" alt="img"/>
    </body>
</html>
in questo momento carica correttamente l'immagine numero 11
funziona anche con il name
Non è dinamico se lo fissi per 2 ore l'immagine non cambia ma se aggiorni la pagian ogni ora si
Se lo hai onine posta il link che gli diamo un occhiata
 

Dany_ct

Nuovo Utente
22 Feb 2017
6
1
3
29
se vuoi usare l'id devi usare getElementById()
HTML:
<html>
    <head>
        <Title> File di esempio </title>
        <script language="JavaScript">
            function apri(conta) {
                nuovo = new Array("img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg",
                        "img5.jpg", "img6.jpg", "img7.jpg", "img8.jpg", "img9.jpg",
                        "img10.jpg", "img11.jpg", "img12.jpg", "img13.jpg", "img14.jpg"
                        , "img15.jpg", "img16.jpg", "img17.jpg", "img18.jpg", "img19.jpg"
                        , "img20.jpg", "img21.jpg", "img22.jpg", "img23.jpg")
                document.getElementById("galle").src = nuovo[conta]
            }
            function avvia() {
                data = new Date();
                ora = data.getHours();
                apri(ora);
            }
        </script>
    </head>
    <body onLoad= "avvia()">
        <img src="http://www.webfract.it/GUIDA/img1.jpg" id="galle" alt="img"/>
    </body>
</html>
in questo momento carica correttamente l'immagine numero 11
funziona anche con il name
Non è dinamico se lo fissi per 2 ore l'immagine non cambia ma se aggiorni la pagian ogni ora si
Se lo hai onine posta il link che gli diamo un occhiata
Grazie mille per la disponibilità nel venirmi in contro. Il problema sostanzialmente è che a me servirebbe uno script che faccia cambiare immagine non solo in base all'orario, ma anche al giorno della settimana. Nello script postato inizialmente da Max1 viene spiegato come far cambiare un'immagine ogni ora, proprio come nello script che hai appena postato tu, ma se non ho la possibilità di giostrarmi i giorni della settimana (oltre che le ore) non posso arrivare al mio scopo, ovvero quello di far cambiare le locandine a mio piacimento nella home del sito. Al limite, qualora questo script dovesse rivelarsi di troppa difficile realizzazione, potrei accomodare con uno script che mi consenta di cambiare immagine solamente in base al giorno della settimana (anche se, ripeto, ciò che realmente mi servirebbe sarebbe il potermi gestire le ore all'interno di tutti i giorni della settimana), ma di uno script che mi consenta unicamente di gestirmi le immagini relative alle ore contenute in un solo giorno ho ben poco da farci, perchè i programmi in radio cambiano giornalmente, non sono sempre gli stessi per tutti i giorni della settimana. Riguardo al sito, purtroppo non è ancora online, per essere online lo dovrei consegnare già completo alla web radio, e per completarlo mi manca solamente questo script.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
nello script si parla anche della funzione data.getDay() che restituisce 0 per lunedi, 1 per martedi e cosi via, potresti unire entrambe le funzioni in questo modo
HTML:
<html>
    <head>
        <Title> File di esempio </title>
        <script language="JavaScript">
            function avvia() {
                nuovo = new Array();

                // lunedi
                nuovo[0] = ["lun_img0.jpg", "lun_img1.jpg", "lun_img2.jpg", "lun_img3.jpg", "lun_img4.jpg",
                    "lun_img5.jpg", "lun_img6.jpg", "lun_img7.jpg", "lun_img8.jpg", "lun_img9.jpg",
                    "lun_img10.jpg", "lun_img11.jpg", "lun_img12.jpg", "lun_img13.jpg", "lun_img14.jpg",
                    "lun_img15.jpg", "lun_img16.jpg", "lun_img17.jpg", "lun_img18.jpg", "lun_img19.jpg",
                    "lun_img20.jpg", "lun_img21.jpg", "lun_img22.jpg", "lun_img23.jpg"];
                // venerdi
                nuovo[5] = ["ven_ven_img0.jpg", "ven_img1.jpg", "ven_img2.jpg", "ven_img3.jpg", "ven_img4.jpg",
                    "ven_img5.jpg", "ven_img6.jpg", "ven_img7.jpg", "ven_img8.jpg", "ven_img9.jpg",
                    "ven_img10.jpg", "ven_img11.jpg", "ven_img12.jpg", "ven_img13.jpg", "ven_img14.jpg",
                    "ven_img15.jpg", "ven_img16.jpg", "ven_img17.jpg", "ven_img18.jpg", "ven_img19.jpg",
                    "ven_img20.jpg", "ven_img21.jpg", "ven_img22.jpg", "ven_img23.jpg"];
                // data
                data = new Date();
                // output
                document.getElementById("galle").src = nuovo[data.getDay()][data.getHours()]
            }

        </script>
    </head>
    <body onLoad= "avvia()">
        <img src="http://www.webfract.it/GUIDA/img1.jpg" id="galle" alt="img"/>
    </body>
</html>
in questo momento carica correttamente l'immagine ven_img13.jpg
 
  • Like
Reactions: Dany_ct

Dany_ct

Nuovo Utente
22 Feb 2017
6
1
3
29
nello script si parla anche della funzione data.getDay() che restituisce 0 per lunedi, 1 per martedi e cosi via, potresti unire entrambe le funzioni in questo modo
HTML:
<html>
    <head>
        <Title> File di esempio </title>
        <script language="JavaScript">
            function avvia() {
                nuovo = new Array();

                // lunedi
                nuovo[0] = ["lun_img0.jpg", "lun_img1.jpg", "lun_img2.jpg", "lun_img3.jpg", "lun_img4.jpg",
                    "lun_img5.jpg", "lun_img6.jpg", "lun_img7.jpg", "lun_img8.jpg", "lun_img9.jpg",
                    "lun_img10.jpg", "lun_img11.jpg", "lun_img12.jpg", "lun_img13.jpg", "lun_img14.jpg",
                    "lun_img15.jpg", "lun_img16.jpg", "lun_img17.jpg", "lun_img18.jpg", "lun_img19.jpg",
                    "lun_img20.jpg", "lun_img21.jpg", "lun_img22.jpg", "lun_img23.jpg"];
                // venerdi
                nuovo[5] = ["ven_ven_img0.jpg", "ven_img1.jpg", "ven_img2.jpg", "ven_img3.jpg", "ven_img4.jpg",
                    "ven_img5.jpg", "ven_img6.jpg", "ven_img7.jpg", "ven_img8.jpg", "ven_img9.jpg",
                    "ven_img10.jpg", "ven_img11.jpg", "ven_img12.jpg", "ven_img13.jpg", "ven_img14.jpg",
                    "ven_img15.jpg", "ven_img16.jpg", "ven_img17.jpg", "ven_img18.jpg", "ven_img19.jpg",
                    "ven_img20.jpg", "ven_img21.jpg", "ven_img22.jpg", "ven_img23.jpg"];
                // data
                data = new Date();
                // output
                document.getElementById("galle").src = nuovo[data.getDay()][data.getHours()]
            }

        </script>
    </head>
    <body onLoad= "avvia()">
        <img src="http://www.webfract.it/GUIDA/img1.jpg" id="galle" alt="img"/>
    </body>
</html>
in questo momento carica correttamente l'immagine ven_img13.jpg
Funziona alla perfezione!
Criric, non so come esserti grato, davvero. Grazie infinite :)

PS: concedimi una piccola correzione, per gli utenti che possibilmente in futuro leggeranno questo post: la funziona data.getDay() restituisce 0 per domenica, 1 per lunedì e così via, fino ad arrivare a 6 per sabato ;)
 
Ultima modifica:
  • Like
Reactions: criric