Home / Programmazione / Javascript - AJAX / Testo lampeggiante con Javascript
Mattepuffo

Testo lampeggiante con Javascript

Testo lampeggiante con Javascript

Vi posto due funzioni che insieme permettono di ottente facilmente un testo lampeggiante.

Il risultato potete vederlo anche qua sul link News.

Prima però faccio una doverosa premessa: lo script non è mio, me lo sono ritrovato scaricato chissà quanto tempo fa, e purtroppo non ho link che rimandano al creatore; dovessi ritrovarlo lo metterò.

Detto ciò iniziamo con la prima funzione:

function blinker(farbe1, farbe2, tempo) {
    faktor = 0;
    heller = 1;
    rot1 = farbe1.substr(0, 2);
    gruen1 = farbe1.substr(2, 2);
    blau1 = farbe1.substr(4, 2);
    rot1 = parseInt(rot1, 16);
    gruen1 = parseInt(gruen1, 16);
    blau1 = parseInt(blau1, 16);
    rot2 = farbe2.substr(0, 2);
    gruen2 = farbe2.substr(2, 2);
    blau2 = farbe2.substr(4, 2);
    rot2 = parseInt(rot2, 16);
    gruen2 = parseInt(gruen2, 16);
    blau2 = parseInt(blau2, 16);
    rot_diff = rot2 - rot1;
    gruen_diff = gruen2 - gruen1;
    blau_diff = blau2 - blau1;
    tempo_verlauf = tempo;
    blinker_verlauf();
}

Questa è la funzione che poi viene richiamata nella pagina.

Richiede tre parametro: il colore di partenza, il colore finale e il tempo di blink.

Una volta identificati i colori viene richiamata questa seconda funzione:

function blinker_verlauf() {
    rot_neu = rot1 + rot_diff / 100 * faktor;
    gruen_neu = gruen1 + gruen_diff / 100 * faktor;
    blau_neu = blau1 + blau_diff / 100 * faktor;
    rot_neu = Math.floor(rot_neu);
    gruen_neu = Math.floor(gruen_neu);
    blau_neu = Math.floor(blau_neu);
    if (heller == 0) {
        faktor += 10;
    } else {
        faktor -= 10;
    }
    if (faktor >= 100) {
        heller = 1;
    }
    if (faktor <= 0) {
        heller = 0;
    }
    for (i = 0; i < document.getElementsByTagName("span").length; i++) {
        if (document.getElementsByTagName("span")[i].className == "blink")
            document.getElementsByTagName("span")[i].style.color = "rgb(" + rot_neu + ", " + gruen_neu + ", " + blau_neu + ")";
    }
    window.setTimeout("blinker_verlauf()", tempo_verlauf);
}

Non mi sono mai soffermato più di tanto sul funzionamento in quanto svolge bene il suo compito senza tanti fronzoli.

Per attivare gli script:

<body onload="blinker('ff0000', 'ffff00', 200);">

Il testo che devo lampeggiare:

<span class="blink">News</span>

E il gioco è fatto.