Visualizzazione dei risultati da 1 a 6 su 6
  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

  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

  3. #3
    Utente di HTML.it L'avatar di andbin
    Registrato dal
    Jan 2006
    residenza
    Italy
    Messaggi
    18,254
    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, andbin.devSenior Java developerSCJP 5 (91%) • SCWCD 5 (94%)
    Java Versions Cheat Sheet

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

  5. #5
    Utente di HTML.it L'avatar di andbin
    Registrato dal
    Jan 2006
    residenza
    Italy
    Messaggi
    18,254
    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, andbin.devSenior Java developerSCJP 5 (91%) • SCWCD 5 (94%)
    Java Versions Cheat Sheet

  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.

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 © 2024 vBulletin Solutions, Inc. All rights reserved.