1

我正在尝试使用 javascript 在我的网页上的特定 div 中交替每个字母的颜色。

我在一个论坛上找到了这个脚本，它使用表单选择来交替 div 的单词颜色：

<script type="text/javascript" language="javascript">
var HTML = '';

    function alternate(colorpair) {
    var el = document.getElementById('alternator');
        if (!HTML) HTML = el.innerHTML;
            colorpair = colorpair.split('|');
            var text = HTML.split(' '), output = '';
            for (var w=0; w<text.length; w++) {
                output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
                output += ';">' + text[w] + '</span> ';
            }
            el.innerHTML = output;
        }
    </script>

这是与它一起使用的html：

    <div id="alternator" class="none">
        This is how the line of text should look after the alternating color effect is applied. And so on, and so forth....
    </div>
    <br /><br />
    <form>
        <select style="font:200 11px arial;color:white;background:#333333;" onchange="alternate(options[selectedIndex].value)">
            <option>select colors</option>
            <option value="red|yellow">red & yellow</option>
            <option value="coral|olive">coral & olive</option>
            <option value="green|purple">green& purple</option>
            <option value="gold|silver">gold & silver</option>
            <option value="skyblue|darkorange">skyblue & dark orange</option>
        </select>
    </form>

正如我上面所说，这个脚本使用一个表格来改变单词的颜色。

我可以改变它，以便在页面加载时字母自动交替吗？

4

4 回答 4

2

这是执行此操作的一种方法，只需将您的 JavaScript 代码替换为以下代码（并从 HTML 中删除表单，因为您只想在页面加载时发生这种情况）：

var HTML = '';

function alternate(colorpair) {
    var el = document.getElementById('alternator');
    if (!HTML) HTML = el.innerHTML;
    var text = HTML.match(/\S\s*(?=\S)/g), output = '';
    for (var w=0; w<text.length; w++) {
        output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
        output += ';">' + text[w] + '</span>';
    }
    console.log(output);
    el.innerHTML = output;
}
alternate(['green', 'purple']);

请注意，使用此方法您还将跳过空格，因此着色看起来更好一些。最终结果如下所示：

在此处输入图像描述

示例：http: //jsfiddle.net/pzeCQ/

于 2013-06-26T16:14:50.217 回答
2

问题 #1：不需要在函数范围之外定义 var HTML。根本不需要定义它，真的。

问题#2：你被一个空格''分开，它会交替单词，而不是字母。

问题#3：你没有去掉现有的标签，所以如果你选择了一个颜色对，然后选择另一个，你将把 html 放入你的文本中。

问题 #4：如果您选择“选择颜色”，它会在尝试获取不存在的颜色对 [1] 时抛出错误

问题 #5：您在每个字母的末尾添加空格，这会破坏进一步的尝试，因为每个交替的字符都是一个空格。你只会看到一种颜色！:P

固定代码：

function alternate(colorpair) {
    if(colorpair.indexOf('|') == -1) return;
    var el = document.getElementById('alternator');
    colorpair = colorpair.split('|');
    var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
                  replace(/<[^>]*>/g,''). /*strip existing html tags */
                  split(''), 
        output = '';
    for (var w = 0, l = letters.length; w < l; w++) {
        output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
    }
    el.innerHTML = output;
}

JSFiddle 演示：http: //jsfiddle.net/xpZqs/

于 2013-06-26T16:17:05.597 回答
1

替换这个：

var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
    output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + text[w] + '</span> ';
}

有了这个：

for (var c=0; c<HTML.length; c++) {
    output += '<span style="color:' + ((c%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + HTML.CharAt(c) + '</span> ';
}

输出将非常冗长。如果你想跳过空格，你需要为此添加一些逻辑。

于 2013-06-26T16:07:38.320 回答
0

我有一个简单的演示：

这假设文本已经在页面上，只影响文本（使用innerText），并将div内的文本替换为所需的html

function alternateColours() {
    var div = document.getElementById("alternator");
    var message = div.innerText;
    html = "";
    var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
    for (var i = 0; i < message.length; i++)
        html += "<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "    </span>";
    div.innerHTML = html;
}
alternateColours();

我建议使用 jQuery 将函数附加到页面加载，这比自己动手要干净得多。

于 2013-06-26T16:22:59.313 回答