代码之家 › 专栏 › 技术社区 › user6818018

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

push loops function arrays javascript

user6818018 · 技术社区 · 7 年前

我创建了一个函数来返回随机颜色,并将其应用于文档中的几乎任何地方。到目前为止还不错,但现在我希望创建一个定数数组(不管有多少项,但假设有四项),这样我就可以使用数组的值来更改某个单词每个字母的颜色。

代码如下:

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

  var colors = getRandomColor();

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

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

我真的不知道从哪里开始,我试图在数组中推送函数,但我不知道如何插入数字(例如I<5)。

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

谢谢

4 回复 | 直到 7 年前

Andy 7 年前

非常接近。然而,我认为您不需要创建数组。只需在映射回调中调用该函数。我在这个例子中使用了所有vanilla 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>

ibrahim mahrir 7 年前

你应该使用 % 操作员始终保持在阵列范围内:

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>

Michael Horn 7 年前

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

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

Md Monjur Ul Hasan 7 年前

我认为您不需要数组来解决您提到的问题,您可以只调用map call back函数中的函数,如下所示:

<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('');
 });