JavaScript 练手的小案例：闪烁文字

stones4zd

于 2020-02-26 20:06:24 发布

阅读量431

点赞数 6

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42703239/article/details/104523597

版权

javascript 专栏收录该内容

74 篇文章 19 订阅

订阅专栏

<div id="box">
    Hello world~!
</div>
<script>
    const colors = "#00FF00|#FF1166|#FF2200|#003377|#FF4400|#FF5511|#FF6600|#2277aa";
    let colorsArr = colors.split("|");
    let colorsLen = colorsArr.length;
    let box = document.getElementById("box");
    setInterval(function(){
        let randNum = Math.floor( colorsLen*Math.random() );
        box.style.color = colorsArr[randNum];
    },100);
</script>

用到的知识点：

1. 常量定义。颜色值不会变，就定义成常量。

2. 字符串和数组的转换。 str.split("|")

3. 随机数：

Math.random() 0 -1 的随机小数，不含 0 ，1 ；

Math.random()* N 0-N 之间的随机数，包含小数部分，不含 0， N；

Math.floor( Math.random()* N ) 0 到 N - 1 之间的整数，包含 0 ，N-1，不含 N

4. 计时器： setInterval

5. JS 直接更改标签样式 : box.style.样式