如何使用javascript在网页上交替字母颜色？ [英] How do I alternate letter colors on a webpage using javascript?

问题描述

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

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

 < script type =text / javascriptlanguage =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  output + ='< span style =color：'+（（w％2）？colorpair [0] colorpair [1]）; 
 output + =';>'+ text [w] +'< / span> ''; 
} 
 el.innerHTML = output; 
} 
< / script> 
  

这是它的html：

 < div id =alternatorclass =none> 
这是在应用交替颜色效果后，文本行应该如何查看。等等，等等。
< / div> 
< br />< br /> 
< form> 
< select style =font：200 11px arial; color：white; background：＃333333; onchange =alternate（options [selectedIndex] .value）> 
< option>选择颜色< / option> 
< option value =red | yellow>红&黄色< / option> 
< option value =coral | olive> coral& olive< / option> 
< option value =green | purple>绿色&紫色< / option> 
< option value =gold | silver> gold& silver< / option> 
< option value =skyblue | darkorange> skyblue&暗橙色< / option> 
< / select> 
< / form> 
  

如上所述，此脚本使用形式

在页面加载时？

解决方案

问题＃1：不需要定义函数范围之外的var HTML。

问题＃2：你用一个空格'分隔，而不是字母。

$问题＃3：你没有剥离现有的标签，所以如果你选择一个颜色对，然后选择另一个，你会把html到你的文本。

问题＃4：如果您选择选择颜色，则会出现尝试获取不存在的colorpair [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现有html标签* / 
 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/

I'm trying to alternate the colors of every letter in a specific div on my webpage using javascript.

I found this script on a forum that alternates the color of the words of a div using a form select:

<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> 

Here's the html to go along with it:

    <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>

As I said above, this script uses a form to change the color of the words.

Can I alter this so that the letters alternate automatically upon page load?

解决方案

Problem #1: No need to define var HTML outside of the scope of the function. No need to define it at all, really.

Problem #2: You are splitting by a space ' ' which would alternate words, not letters.

Problem #3: You're not stripping out existing tags, so if you select a color pair once, then select another, you'll be putting html into your text.

Problem #4: If you select 'select colors', it will throw an error trying to get colorpair[1] which won't exist

Problem #5: You're adding spaces at the end of each letter, which will break further attempts, as each alternating character will be a space. You'll only see one color! :P

Fixed code:

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 Demo: http://jsfiddle.net/xpZqs/

这篇关于如何使用javascript在网页上交替字母颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！