Question

我正在创建一个使文本成为彩虹色的功能。

我有两个数组。一个用于颜色，一个用于字符串。

我基本上想要做的是根据所需的文本多次循环颜色。

＆＃13;

var colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'];

function colorText(word) {
  var slicedText = word.split('');
  var rainbowText= '';
  
  if (typeof(word) !== 'string') {
    alert('Thats not a word!');
  } else {
    for (var i = 0; i < slicedText.length; i++ ) {
      rainbowText += '<span style="color:' + colors[i] + ';">' + slicedText[i] + '</span>';
  }
  
  document.getElementById('text-input').innerHTML = rainbowText;
  }
}

colorText('this is a really long text');

＆＃13;

<div id="text-input">
  
</div>

＆＃13;

Answer 1

当slicedText.length大于colors.length时，您正在颜色数组范围之外编制索引。如果所需行为是在到达颜色末尾后从索引0开始，请使用模运算符。

colors[ i % colors.length ]

var colors = [ 'blue', 'red', 'green', 'black', 'orange', 'purple' ];

function colorText(word) {
  var slicedText = word.split( '' );
  var rainbowText = '';

  if (typeof( word ) !== 'string') {
    alert('Thats not a word!');
  } else {
    for (var i = 0; i < slicedText.length; i++) {
      rainbowText += '<span style="color:' + colors[ i % colors.length ] + ';">' + slicedText[ i ] + '</span>';
    }

    document.getElementById( 'text-input' ).innerHTML = rainbowText;
  }
}

colorText( 'this is a really long text' );

<div id="text-input">
  
</div>

Answer 2

实现相同作业而不着色白色空间的另一种方法。

var str = "this is a really long text",
 colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'],
 result = [...Array(str.length)].reduce((p,_,i) => p + (str[i] !== ' ' ? '<span style="color:'+colors[i%colors.length]+';">' + str[i] + '</span>'
                                                                       : ' '),'');
document.getElementById("textdiv").innerHTML = result;

<div id="textdiv"></div>

多次循环遍历数组，直到第二个数组完成

2 个答案: