从 1 和 0 的字符串中选择随机数并更改颜色

Posted 2023-02-25

【中文标题】从 1 和 0 的字符串中选择随机数并更改颜色

【英文标题】：Select random number from string of 1's and 0's and change color

【发布时间】：2016-05-19 01:35:18

【问题描述】：

我通过 jQuery 显示了一串随机的 1 和 0。我现在想选择一个随机数并更改它的颜色。使用数组还是 $(div).text() 字符串更好？我可以从中获取一个数字，但是如何将它插入到 div 中？

 var numbArray = [];

 for(i=0; i<10; i++)
 
   var randomNumbers = Math.round(Math.random());
   $('#numbs').prepend(randomNumbers);
   numbArray[i] = randomNumbers;
 

<div id="numbs">0000110111 </div>

上面的 div 是代码的结果，但是我如何选择一个随机项，改变它的颜色，并显示在原始输出中？

谢谢，

【问题讨论】：

您是根据随机数的二进制总和来更改文本颜色吗？我建议使用数组，因为它已经有数字，然后将您的选择分配给var bin，然后$('#numbs').text(bin)

_ 将其插入 div_ 意味着？

【参考方案1】：

您需要从数字字符串中选择一个随机索引，并在该特定数字周围附加一些元素以赋予其某种风格。

var number = '0000110111';

var index = Math.floor(Math.random() * number.length);

for(var i = 0; i < number.length; i++) 
  var n = number.charAt(i);
  if(i == index) 
    $('#numbs').append($('<span/>').css('color', 'red').text(n));
   else 
    $('#numbs').append(n);
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numbs"></div>

【参考方案2】：

大家的回答都很好；谢谢！我没有想到附加 DOM 并重新显示。我为每个数字分配了一个 id，然后使用 css 而不附加。我一直在寻找会变成颜色的数字，当所有数字都是那种颜色时，脚本就会停止。我不知道哪种方法效果最好，但这种方法对我有限的人数来说是可以的。

var whiteNumbs =
[0,1,1,0,1,1,0,1,0,1,1,0,0,0,0,1,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,0]

for(var i=0; i<whiteNumbs.length; i++) 

    $("#numbs").append('<span class="white" id="num_' + i + '">' +
     whiteNumbs[i] + '</span>');


function MakeRed()

    var randomNumber = Math.floor(Math.random() * whiteNumbs.length-1);

    var changeCSS = "#num_" + randomNumber;

    $(changeCSS).removeClass('white');
    $(changeCSS).addClass("red");

if ($("#numbs span").hasClass("white") )

    setTimeout(MakeRed,1000);

else

    return false;   


;

MakeRed();

【参考方案3】：

您可以在某个索引处定位数字，用所需的颜色包装它并重建字符串并使用html()将其设置回div，并使用Math.floor(Math.random() * 10)生成从零到长度的随机数你拥有的角色。

var index = 3;
var originalElementValue;

function colorStringValue(strIndex)

  strIndex = parseInt(strIndex);
  
  var character = originalElementValue.charAt(strIndex);
  $("#numbs").html(originalElementValue.substr(0, strIndex) + "<span style='color:red'>" + character + "</span>" +  originalElementValue.substr(strIndex+1));
  
  



$(document).ready(function()

  originalElementValue = $("#numbs").text();
  colorStringValue(index);
  
  $("#strIndex").click(function()
  
       var rand = Math.floor(Math.random() * 10) + 0  ;
    $("#rand").html(rand);
        colorStringValue(rand);
  
  );


);

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

<button id="strIndex" > Generate Random Number </button>
<br />

Random Number : <span id="rand"></span>

<br />

<div id="numbs">0000110111</div>

【参考方案4】：

这就是你要找的吗？我只是试了一下。 :)

     var numbArray = [];
     var sample = "<span style='color:#%COLOR%'>%NUM%</span>";
     for(i=0; i<10; i++)
     
       var randomNumbers = Math.round(Math.random());
       var html = sample.replace('%NUM%', randomNumbers);
       var randomColor = Math.round((Math.random()* 100000000 )%16777215).toString(16);
       html = html.replace('%COLOR%', randomColor);
       $('#numbs').prepend(html );
       numbArray[i] = randomNumbers;
     

我假设你也想要随机颜色。

【参考方案5】：

如果我理解正确的问题，您想为 div 中的特定位置设置颜色。这意味着您必须在 div 内以特定颜色的随机位置创建一个跨度（或另一个 html 元素）。我没有在下面测试过这段代码，但我想你可以这样：（在这个例子中，随机项目的红色）

var randomIndex= Math.floor(Math.random() * 9); //Random number between 0 and 9.
var currentContent = $("#numbs").html(); 
var randomItem= currentContent.charAt(randomIndex);

newContent = '';
for(i=0; i<10; i++) 
    if (i == randomIndex) 
        newContent = newContent + 
        '<span style="background:red;">' + randomItem + '</span>';
    
    else 
        newContent = newContent + currentContent.charAt(i);
    


$("#numbs").html( newContent );

【参考方案6】：

var numbArray = [];

for(i = 0; i< 10; i++) 
    var randomNumbers = Math.round(Math.random());
    numbArray[i] = randomNumbers;
    $('#numbs').prepend(number);

var randomNumberSelection = numbArray[Math.floor((Math.random() * (numbArray.length-1)) + 1)];

$('#numbs').html("");

var number;
for(number in numbArray) 
    if(number == randomNumberSelection) 
        var colorColorCodedNumber = ""+number;
            colorColorCodedNumber = colorColorCodedNumber.fontcolor("blue");//blue!
        $('#numbs').prepend(colorColorCodedNumber);
     else 
        $('#numbs').prepend(number);
    

我相信您正在寻找与此类似的东西，或者至少这是我从您所要求的内容中得到的。

请注意，在此示例中，您会看到我们清除了元素，然后简单地重复您之前存储的数组。这就是你“更新”它的方式。