[Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione

jk82

Nuovo Utente
15 Mar 2019
2
0
1
Salve a tutti,

premetto che sono veramente alle prime armi con js e con gran fatica e lunghe ricerche sono riuscito a inserire un generatore di numeri casuale con pulsante di input all'interno di un sito web.

Ciò che però vorrei è che dopo la pressione del pulsante di input e la comparsa a schermo del risultato, vorrei inserire una sorta di animazione di caricamento ed un effetto sonoro

Quindi in pratica ritardare per qualche secondo l'uscita del risultato mentre nell'attesa compare una gif di caricamento. Dopodichè udire un suono in contemporanea con l'uscita del risultato.

Premetto che non so se nemmeno è possibile fare quanto sto chiedendo, per questo mi rivolgo a voi almeno per delle dritte sul come arrivare a questo risultato.

Questo il codice per far capire meglio

Codice:
function IsNumeric(n){
    return !isNaN(n);
}

$(function(){
   
    $("#getit").click(function() {
   
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();
       
        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
       
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
       
        if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }
       
        return false;
    });
   
    $("input[type=text]").each(function(){
        $(this).data("first-click", true);
    });
   
    $("input[type=text]").focus(function(){
       
        if ($(this).data("first-click")) {
            $(this).val("");
            $(this).data("first-click", false);
            $(this).css("color", "black");
        }
       
    });
   
});
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Premetto che non so se nemmeno è possibile fare quanto sto chiedendo, per questo mi rivolgo a voi almeno per delle dritte sul come arrivare a questo risultato.
Ciao, non so se sei già riuscito ad andare avanti, per il momento posso darti giusto qualche consiglio.
Ti dico che ciò che chiedi è possibile farlo e non è così complicato.

Per l'attesa puoi usare la funzione setTimeout.

Per l'animazione di caricamento ti consiglio una qualche soluzione in css piuttosto che una gif, ad esempio impostando una certa classe per la quale viene mostrata l'animazione. In questo modo puoi applicare tale classe in maniera semplice via JavaScript e rimuoverla nella funzione richiamata dal setTimeout.

Per l'audio puoi usare un semplice oggetto <audio> (HTML5) impostandolo in modo che non venga eseguito in autoplay. A quel punto lo esegui col metodo play() nella funzione del setTimeout.

Queste sono delle indicazioni di massima, magari cerca di risolvere una parte alla volta, poi se ti serve ulteriore aiuto chiedi sempre qui postando eventualmente la parte che sei riuscito a sviluppare.

PS: Oltre allo script sarebbe opportuno poi postare anche la parte html relativa a quello script, altrimenti è difficile, per chi cerca di aiutarti, poter riprodurre la situazione.
 
Discussioni simili
Autore Titolo Forum Risposte Data
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
spider81man Connettersi ad un DB ed inserire dati con Javascript Javascript 3
P [Javascript] Inserire una nuova condizione in una funzione Javascript 3
L [Javascript] Come inserire codice dopo un div in automatico Javascript 2
G [Javascript] jQuery PHP MySql - inserire variabile nel DataBase Javascript 8
F [Javascript] Inserire il contenuto di una pagina in un Div Javascript 2
L Inserire codice php dentro al javascript PHP 4
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
J Inserire codice javascript in html Javascript 3
liolucas Inserire un menù javascript verticale Javascript 4
C come inserire questo javascript? Javascript 2
C inserire ora e data in file html generato da javascript Javascript 5
G inserire javascript in pagine dinamiche HTML e CSS 1
G Inserire javascript in pagine dinamiche Javascript 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
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1

Discussioni simili