Question

好的，所以我正在为自己创建一个网页/为了好玩，我希望网页上的标题有一个闪烁的效果。比如，想到一个灯泡及其闪烁，但我也希望随机字母闪烁。我知道这可能涉及一些java脚本，我还没那么好，我找不到例子，所以我想我会尝试这个地方，看看是否有人可以帮助我？所以，我正在使用动画片中的灵感来链接：https://youtu.be/No_omXE6TK0?t=14s 我有点希望它看起来像闪烁的那样。在此先感谢!!

Answer 1

如果您无法运行代码段，则可以使用以下内容：https://jsfiddle.net/8m667mj4/

＆＃13;

var string = x.innerHTML;
var aBlinkingString = "";
for (i = 0; i < string.length; i++) {
    aBlinkingString += "<span class='blink'>" + string[i] + "</span>";
}
x.innerHTML = aBlinkingString;
colors = ["red", "green", "blue"];
setInterval(function() {
            document.querySelectorAll(".blink")[Math.round((document.querySelectorAll(".blink").length - 1) * Math.random())].style.color = colors[Math.round((colors.length - 1) * Math.random())];
            }, 10)

＆＃13;

<h1 id="x">
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
</h1>

＆＃13;

我将h1元素id设置为x，以便稍后我可以在DOM中访问它。

在for循环中，我将h1元素中的每个字母都包装在span元素中。

然后，我访问一个随机span元素并随机更改其颜色。

请参阅此http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array以了解如何从数组和http://www.w3schools.com/jsref/prop_style_color.asp中选择随机元素，以了解如何设置元素的颜色。

随机字母闪烁效果[与diff字体颜色]

1 个答案: