css 圣诞快乐互动留言

mxg2im7a 于 2022-12-27 发布在其他

关注(0)|答案(2)|浏览(127)

我希望用“* 圣诞快乐 *”消息和以下要求来设计页面样式：

字母依次点亮和熄灭（以“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>

我怎样才能做到这一点？

css

来源：https://stackoverflow.com/questions/41316697/merry-christmas-interactive-message

2条答案

按热度按时间

fbcarpbf1#

我的变体https://jsfiddle.net/br3t/dmr2ksy4/：
1)使用setInterval（或setTimeout）
2)别忘了css

赞(0）回复(0）举报 2022-12-27

xpcnnkqh2#

根据Jordan S的解：

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

赞(0）回复(0）举报 2022-12-27

我来回答

css 圣诞快乐互动留言

2条答案

相关问题

热门标签

最新问答