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

2023年3月16日 187次阅读

我有一串随机的1和0通过jQuery显示.我现在想选择一个随机数并改变它的颜色.使用数组或$(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是代码的结果,但是如何选择随机项,更改其颜色并在原始输出中显示？

谢谢,

最佳答案 您可以在某个索引处找到该数字,用所需颜色包装它并重建字符串并使用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>
点赞