Question

我创建了一个函数来返回一个随机颜色并在我的文档中的任何地方应用。到目前为止这么好但现在我希望创建一个确定数字的数组（无论有多少项，但让我们说四个）所以我可以使用数组的值来改变每个字母的颜色某个词。

以下是代码：

a = [('ANTA01H3F', 'LEC02', '17-12-07', '14:00')]

问题是我不知道如何迭代我的函数来创建数组。

我真的不知道从哪里开始，我试图在数组中推送该函数，但后来我不知道如何插入数字（例如i＆lt; 5）。

我真的需要一个提示或至少是迭代数组的原则。

由于

Answer 1

非常接近。但是，我不认为你需要创建一个数组。只需在地图回调中调用该函数即可。在这个例子中我使用了所有的香草JS。

var colourword = document.querySelector('.colourword');
var text = colourword.textContent;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

colourword.innerHTML = Array.from(text).map(function(letter) {
  return '<span style="color:' + getRandomColor() + '";>' + letter + '</span>';
}).join('');

<div class="colourword">Anyword</div>

Answer 2

看起来你不需要数组。你可以在映射函数中调用getRandomColor：

$('colourword').html(function() {
    return $.map($(this).text().split(''), function(el, i) {
        var color = getRandomColor();
        return '<span style="color: ' + color + '";>' + el + '</span>';
    }).join('');
});

Answer 3

我认为你不需要一个数组来解决你提到的问题你可以在地图回调函数中调用函数，如下所示：

<div class="colourword">Anyword</div>

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  $('colourword').html(function() {
     return $.map($(this).text().split(''), function(el, i) {
         var colors = getRandomColor(); 
         return '<span style="color:' +colors+ '">' + el + '</span>';
   }).join('');
 });

Answer 4

您应该使用%运算符始终保持在数组的范围内：

var colors = [/*...*/]; // fill array with any number of colors you want

$('colourword').html(function() {
    return $.map($(this).text().split(''), function(el, i) {
        return '<span style="color:' + colors[i % colors.length] + '";>' + el + '</span>';
//                                     ^^^^^^^^^^^^^^^^^^^^^^^^^
    }).join('');
});

因为任意数字N和L：0 <= N % L < L。

示例：

function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } var colors = []; for(var i = 0; i < 4; i++) // fill the array with 4 random colors colors.push(getRandomColor()); $('.colourword').html(function() { return $.map($(this).text().split(''), function(el, i) { return '<span style="color:' + colors[i % colors.length] + ';">' + el + '</span>'; }).join(''); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="colourword">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

迭代一个函数并将其推入一个数组以创建一个具有一定数量元素的数组

4 个答案: