Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Caricare immagini casuali da cartelle differenti

  1. #1

    Caricare immagini casuali da cartelle differenti

    Questo JS dovrebbe caricare un'immagine a caso presa da una cartella a caso, sapendo che nella cartella 1 ci sono immagini da 001.jpg a 100.jpg, nella 2 da 101.jpg a 200.jpg, nella 3 da 201.jpg a un valore crescente nel tempo (attualmente 217.jpg). Le cartelle hanno path "covers/big/" rispetto alla cartella dove si trova il file con il codice in questione.
    Non funziona, non visualizza nulla, neppure l'iconcina dell'immagine mancante! Eppure l'ho scritto mettendo assieme un paio di esempi separatamente funzionanti tipo caricare un'immagine casuale e scrivere la simulazione di una estrazione del lotto...


    codice:
        var cartella = 1+Math.floor(Math.random()*3);
        var albo;
        document.write("<img src='covers/big/" + cartella);
        if (cartella == 1) {
            albo = 1+Math.floor(Math.random()*100);
            if (albo < 10) {
                document.write("/00" + albo + ".jpg' />");
            } else if (albo < 100) {
                document.write("/0" + albo + ".jpg' />");
            } else {
                document.write("/" + albo + ".jpg' />");
            }
        } else if (cartella == 2) {
            albo = 101+Math.floor(Math.random()*100);
            document.write("/" + albo + ".jpg' />");
        } else if (cartella == 3) {
            albo = 201+Math.floor(Math.random()*217);
            document.write.("/" + albo + ".jpg' />");
        }
    Il codice ovviamente è racchiuso nei tag script di una pagina che dichiara HTML5.
    Ultima modifica di Gas75; 14-06-2018 a 01:17
    Studio tecnico 75: servizi per professionisti e aziende
    No richieste di assistenza via MP, grazie.

  2. #2
    Ho verificato che anche le assegnazioni di valori fatte ad albo sono corrette. C'è qualcosa di sbagliato nella composizione del path dell'immagine, che però mi risulta giusto.

    ---

    Ok, risolto! C'era un errore nella costruzione dei nomi delle immagini...
    Ultima modifica di Gas75; 14-06-2018 a 10:52
    Studio tecnico 75: servizi per professionisti e aziende
    No richieste di assistenza via MP, grazie.

  3. #3
    Quote Originariamente inviata da Gas75 Visualizza il messaggio
    codice:
        var cartella = 1+Math.floor(Math.random()*3);
        var albo;
        document.write("<img src='covers/big/" + cartella);
        if (cartella == 1) {
            albo = 1+Math.floor(Math.random()*100);
            if (albo < 10) {
                document.write("/00" + albo + ".jpg' />");
            } else if (albo < 100) {
                document.write("/0" + albo + ".jpg' />");
            } else {
                document.write("/" + albo + ".jpg' />");
            }
        } else if (cartella == 2) {
            albo = 101+Math.floor(Math.random()*100);
            document.write("/" + albo + ".jpg' />");
        } else if (cartella == 3) {
            albo = 201+Math.floor(Math.random()*217);
            document.write.("/" + albo + ".jpg' />");
        }
    Il codice che hai scritto, anche correggendolo, è comunque fumoso, critico e poco maneggiabile. Già solo per dirne una:

    201+Math.floor(Math.random()*217)

    ottieni da 201 a 417 (!)
    Andrea, www.andbin.net – Senior Java developer – SCJP 5 (91%) – SCWCD 5 (94%)
    Il mio blog sulla programmazione

  4. #4
    Quote Originariamente inviata da andbin Visualizza il messaggio
    Il codice che hai scritto, anche correggendolo, è comunque fumoso, critico e poco maneggiabile. Già solo per dirne una:

    201+Math.floor(Math.random()*217)

    ottieni da 201 a 417 (!)
    Infatti ho poi scritto di seguito:
    C'era un errore nella costruzione dei nomi delle immagini...
    Ho scritto quel codice di notte, non ho notato dove andassero a parare i vari numeri random moltiplicati...
    Studio tecnico 75: servizi per professionisti e aziende
    No richieste di assistenza via MP, grazie.

  5. #5
    Ti mostro come si può fare diversamente. Innanzitutto si possono fare due function riutilizzabili, che si possono anche mettere in un file .js a parte.

    codice:
    function randomNumber(minVal, maxVal) {
        var count = maxVal - minVal + 1;
        return minVal + Math.floor(Math.random() * count);
    }
    
    function leftZeroPad(v, len) {
        var str = String(v);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }

    Poi la generazione della immagine:

    codice:
    var numCartella = randomNumber(1, 3);
    var numImmagine;
    
    switch (numCartella) {
    case 1: numImmagine = randomNumber(1, 100); break;
    case 2: numImmagine = randomNumber(101, 200); break;
    case 3: numImmagine = randomNumber(201, 217); break;
    }
    
    document.write("<img src='covers/big/" + numCartella + "/" + leftZeroPad(numImmagine, 3) + ".jpg'>");

    Come vedi è estremamente esplicativo e molto facilmente maneggiabile. Aggiungere una cartella o cambiare i range è molto semplice e immediato.

    Se poi si volesse usare una piccola struttura dati, quello switch si potrebbe del tutto eliminare.
    Andrea, www.andbin.net – Senior Java developer – SCJP 5 (91%) – SCWCD 5 (94%)
    Il mio blog sulla programmazione

  6. #6
    Indubbiamente la tua soluzione è più pratica.

    Il mio codice, una volta aggiustato, era già in un file .js a parte, dato che dev'essere richiamato in più pagine del sito e va aggiornato con una certa frequenza...

    Grazie degli spunti.
    Studio tecnico 75: servizi per professionisti e aziende
    No richieste di assistenza via MP, grazie.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.