在 javascript 中随机化字母颜色

Question

我正在尝试创建一个脚本，为我网站上 "p" 标签内的每个单独字母赋予随机颜色。着色部分工作正常，问题是我的脚本覆盖了 "br" 和 "a" 标签。有什么解决方法吗？

到目前为止，这是我的代码：

function changeColor() {
    var paragraphs = document.getElementsByTagName("p");
   
    for(var i = 0; i < paragraphs.length; i++)
    {
        var innerText = paragraphs[i].innerText;
        var innerTextSplit = innerText.split("");
        paragraphs[i].innerText = ""
       
        for(var j = 0; j < innerTextSplit.length; j++) {
            var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ");"
 
            innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
            paragraphs[i].innerHTML += innerTextSplit[j];
        }
    }
}

非常感谢任何帮助，提前致谢:)

-jAndersen

Answer 1

请在下面的代码片段中找到一个函数 getRandomColor() 用于生成随机颜色十六进制代码

$(function(){
changeColor();
});

function changeColor() {
    var paragraphs = document.getElementsByTagName("p");
   
    for(var i = 0; i < paragraphs.length; i++)
    {
        var innerText = paragraphs[i].innerText;
        var innerTextSplit = innerText.split("");
        paragraphs[i].innerText = ""
       
        for(var j = 0; j < innerTextSplit.length; j++) {
            var randomColor =getRandomColor();
 
            innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
            paragraphs[i].innerHTML += innerTextSplit[j];
        }
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>geloosmsd</p>
<p>geloosmsd</p>
<p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p><p>geloosmsd</p>

Answer 2

不够优雅，但试试看：

function changeColor() {
var paragraphs = document.getElementsByTagName("p");

for(var i = 0; i < paragraphs.length; i++)
{
    var innerText = paragraphs[i].innerHTML;
    var innerTextSplit = innerText.split("");
    paragraphs[i].innerText = "";

    var isHTMLElement = false;

    for(var j = 0; j < innerTextSplit.length; j++) {
        if(innerTextSplit[j] == "<")
          isHTMLElement = true;

        if(!isHTMLElement){
          var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ");"
          innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
        }

        if(innerTextSplit[j] == ">")
            isHTMLElement = false;

    }

    innerTextSplit = innerTextSplit.join('');
    paragraphs[i].innerHTML += innerTextSplit;
}
}

在 javascript 中随机化字母颜色

Randomize letter color in javascript

javascript

random

colors

letter