Frohe Weihnachten interaktive Nachricht mit JQuery

Im suchend eine Seite mit einer „Frohe Weihnachten“ -Meldung und die folgende Forderung stylen:Frohe Weihnachten interaktive Nachricht mit JQuery

Die Buchstaben Hell- und Licht-Aus-eins nach der anderen (beginnt mit "M" und endet mit "s" und starten wieder)

habe ich versucht, mit JQuery, aber kippe nageln.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Merry Christmas!</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<style> 
.merry-christmas{ 
     font-weight:bold; 
     font-size:200px; 
} 
</style> 
<body> 

<div class="merry-christmas"> 
    Merry Christmas! 
</div> 

</body> 
<script> 
    $(document).ready(function(){ 
     var message = $("div").text(); 
     for (var x = 0; x < message.length; x++) 
     { 
      var c = message.charAt(x); 
      alert(c);//How to change the class of the letter? 
     } 
    }); 
</script>

Wie kann ich das erreichen?

Frohe Weihnachten !!

Quelle

2016-12-24 DiegoS

Sie haben es versucht, zeigen Sie uns, was Sie haben! –

Nur die leere HTML-Seite mit der Nachricht Ich weiß nicht, wie man eine "hervorgehobene" Klasse oder etwas Ähnliches zu jedem Buchstaben umschalten kann – DiegoS

Diese Frage ist zu breit. Wenn Sie nur nach den Buchstaben gefragt haben, die sich in einer Schleife ändern, wäre das vielleicht in Ordnung (auch wenn Sie nicht wirklich wissen, wie Sie anfangen sollen) ... aber dann bitten Sie die Leute, es zu schneien und ihm ein Weihnachtsthema zu geben ? übertrieben, Mann. – andi

Meine Variante https://jsfiddle.net/br3t/dmr2ksy4/:

1) verwenden setInterval (oder setTimeout)

2) vergessen Sie nicht, CSS über

Quelle

2016-12-24 21:08:03 br3t

Basierend auf Jordan S-Lösung:

var text = $(".merry-christmas").text().split(''); 
 
$(".merry-christmas").empty(); 
 

 
text.forEach(function(letter) { 
 
    var letter = $("<span>").text(letter).addClass('letter'); 
 
    $(".merry-christmas").append(letter); 
 
}); 
 

 
var current = 0; 
 
window.setInterval(function() { 
 
    $s = $(".letter"); 
 
    if (current == $s.length) { current = 0; } 
 
    $s.removeClass('blink'); 
 
    $($s[current++]).addClass('blink'); 
 
}, 250);

.letter { font-family: sans-serif; font-size: 50px; color: #0eaf36; } 
 
.blink { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="merry-christmas">Merry Christmas!</div>

JSfiddle

Quelle

2016-12-25 02:29:43

Frohe Weihnachten interaktive Nachricht mit JQuery

Antwort

Verwandte Themen