Javascript结合HTML实现自动换颜色

1、HTML代码

<div id="H-one">欢迎来到GCLover游戏俱乐部官网</div>

2、JavaScript代码


    // 网站标题随机变色
    var div = document.getElementById("H-one");

    // 产生一个含有10种颜色的随机颜色库
    var colorArr = [];
    for(var j = 0; j < 10; j++){
        // “#”号  + 十六进制的颜色编码方式
        var data = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
        function DisColor(n){
            var res = "";
            for (var i = 0; i < n; i++) {
                var id = Math.ceil(Math.random() * 15);
                res += data[id];
            }
            return res;
        }
        var num = "#" + DisColor(6);
        colorArr[j] = num;
    }
        
    console.log(colorArr);

    // 让HTML页面获取颜色库中的颜色
        //每隔1秒输出数组中的一项:无限自动换色。
        function ShowArr(){
            var col = colorArr[Math.floor(Math.random()*colorArr.length)];
            div.style.color = col;
            //console.log(col);
        }
        setInterval("ShowArr()",1000); 
3、效果展示

注意:JavaScript的代码放置在HTML代码之后!如果是外部导入,则把<script></script>放置在body的结尾标签与HTML结尾标签之间,否则将看不到效果!

声明:此操作是一个无限循环的操作,在使用完后请关闭浏览器窗口,以防止对电脑的损害

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章