Question

我正在编写一个应用程序，它接受用户输入并随机分配文本中每个字母的颜色。

HTML CODE

#version 330 core

// interpolated values from the vertex shaders
in vec3 vColor;

// uniform input data
uniform float uAlpha;

// output data
out vec3 fColor;

void main()
{
    // set output color
    fColor = vec4(vColor, uAlpha);
}

的JavaScript

#version 330 core

// input data (different for all executions of this shader)
in vec3 aPosition;
in vec3 aColor;

// ModelViewProjection matrix
uniform mat4 uModelViewProjectionMatrix;

// output data (will be interpolated for each fragment)
out vec3 vColor;

void main()
{
    // set vertex position
    gl_Position = uModelViewProjectionMatrix * vec4(aPosition, 1.0);

    // the color of each vertex will be interpolated
    // to produce the color of each fragment
    vColor = aColor;
}

我可以为每个单词着色，但希望它能为每个单词着色。我不想使用css。

Answer 1

您的代码目前在每个单词周围包裹span，因为splits是空格字符上的字符串。

相反，您应该使用.split()拆分它，它将返回所有字符的数组（包括空格）。

然后，您需要使用.join()加入它们。

document.getElementById("Enter").onclick = function() {
  var colors = document.getElementById('inputColors').value;
  var colorslist = colors.split(/[;,]+/);

  $('#text').each(function() {
    $(this).html($(this).text().split('').map(function(v) {
      return '<span style="color:' + colorslist[Math.floor(Math.random() *
        colorslist.length)] + '">' + v + '</span>';
    }).join(''));
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
  Retrieve data from selected text input among various text inputs with same name &amp; id upon hitting Enter
</div>
<input type="text" id="inputColors" value="red,yellow,blue,green,orange" />
<input id="Enter" type="button" value="Enter" />

JavaScript：根据输入为字母随机选择颜色

1 个答案: