Question

我希望使用“ Merry Christmas ”消息设置页面样式并满足以下要求：

字母一个接一个地点亮和点亮（以“ M ”开头，以“ s ”结束并重新开始）

我尝试使用JQuery，但无法确定它。

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

¿我怎样才能实现这个目标？

圣诞快乐!!

Answer 1

我的变体https://jsfiddle.net/br3t/dmr2ksy4/：

1）使用setInterval（或setTimeout）

2）不要忘记css

Answer 2

基于Jordan S的解决方案：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

JSfiddle

与JQuery的圣诞快乐互动消息

2 个答案: