[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
33
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.
 

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
33

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
33
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
33
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
33
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
Discussioni simili
Autore Titolo Forum Risposte Data
D [Javascript] Script che controlla quello che hai scritto nell'input Javascript 3
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
C Script Javascript/Html che con internet Explorer non viene visualizzato. Javascript 7
S script php che raccoglie form javascript e lo invia tramite mail PHP 0
D [Javascript] inserire uno script in un file php Javascript 6
R [Javascript] Aiuto su questo script Javascript 2
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
trattorino [Javascript] ELSE su java script Javascript 1
T [Javascript] stessa pagina, stesso script: su un server va, su un altro NO! Javascript 6
T [Javascript] Far partire script al raggiungimento del div/section Javascript 0
trattorino [Javascript] Java script ritorni a capo Javascript 7
N [Javascript] script demo preloader per video Javascript 0
Daniele450 [Javascript] Slide show in java script, senza array con nome visibile dell'immagine Javascript 2
P [Javascript] errore su script .js.... Javascript 1
P [Javascript] Aiuto per recupero variabili da script Javascript 10
S Problema con script php-javascript PHP 2
I script preventivo javascript Javascript 3
T [JavaScript & Ajax] Eseguire script dopo chiamata A Ajax 2
S Consigli per script javascript per creare videogiochi Javascript 2
ps83 Vendo script in javascript Altri Annunci 0
G Passare loop in php su uno script javascript PHP 12
V script php e javascript Ajax 13
M [cerco lavoro][retribuito] Realizzazione script php/javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
C Utilizzo di YUI Compressor e di Gzip per script html/javascript HTML e CSS 1
C Adattare uno script di altro linguaggio a javascript Javascript 11
A Help Script in Javascript (sono molto insesperto) Javascript 0
C Script in javascript calcolo prezzo totale Javascript 3
S script con javascript non viene visto da Firefox e Explorer ma solo da Chrome Javascript 2
danlupo Javascript e Script Flash Javascript 0
S script greasemonkey javascript Javascript 7
M script javascript e ajax per form dinamico. Ajax 8
F Include in javascript da un altro script .js Javascript 1
K Esecuzione di Script PHP alla JavaScript PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0

Discussioni simili