Question

我正在寻找创建一个网页，可以在0-100之间生成20个随机数，然后显示所有奇数，以及所有大于或等于50的数字。我知道你需要.grep（）in jQuery，但我正在努力使随机数链接到我的其他按钮。你如何通过随机数找到奇数。如果可能，他们可以留在同一页面任何建议或解释将不胜感激吗？

//display random numbers
$(document).ready(function() {
  $("#btn").click(function() {
    for (i = 0; i <= 20; i++) {
      var randNum = 0;
      var randNum = Math.floor(Math.random() * 100);
      $("#con").append(" " + randNum);
    }
  });
});

// numbers over fifty
$(document).ready(function() {
  $("#btn2").click(function() {
    var arr = []
    while (arr.length < 10) {
      var randomnumber = Math.floor(Math.random() * 51) + 50;
      
      if (arr.indexOf(randomnumber) > -1) 
        continue;
        
      arr[arr.length] = randomnumber;
    }
    document.write(arr);
  });
});

div {
  color: blue;
}

p {
  color: green;
  margin: 0;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btn">Generate Random Numbers</button>
<div id="con"></div><br/>
<button type="button" id="btn1">Get Odd Numbers </button><br/><br/>
<button type="button" id="btn2">Display Numbers Above 50 </button>

Answer 1

首先，您不需要jQuery来获取阵列/随机数逻辑。 jQuery主要是修改DOM的工具。要填充数组，您需要本机JS方法。

一旦你生成了随机数组（你可以使用数组函数简化），你就可以使用filter()方法创建一个新的数组，这是一个简化的动作集。上一个按钮。试试这个：

＆＃13;

$(document).ready(function() {
  // generate
  $("#btn").click(function() {
    var nums = Array.from({ length: 20 }, () => Math.floor(Math.random() * 100));
    $("#nums").data('nums', nums).html(nums.join(', '));
  });

  // odds
  $("#btn1").click(function() {  
    var nums = $('#nums').data('nums') || [];
    var odds = nums.filter(i => i % 2 == 1);
    $("#odds").data('odds', odds).html(odds.join(', '));
  });

  // > 50
  $("#btn2").click(function() {  
    var odds = $('#odds').data('odds') || [];
    var overs = odds.filter(i => i > 50);
    $("#overs").html(overs.join(', '));
  });
});

＆＃13;

div { color: blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btn">Generate Random Numbers</button>
<div id="nums"></div><br/>

<button type="button" id="btn1">Get Odd Numbers </button><br/>
<div id="odds"></div><br/>

<button type="button" id="btn2">Display Numbers Above 50 </button><br/>
<div id="overs"></div><br/>

＆＃13;

Answer 2

Rory的答案更明确的版本，不使用jQuery。

window.generatedNumbers = [];
var output = document.querySelector('.output');

// Generates a new set of numbers
document.querySelector('#btn').addEventListener('click', function() {
	window.generatedNumbers = [];
	for (i = 0; i < 20; i++)
      window.generatedNumbers.push(Math.floor(Math.random() * 100));
      
  output.innerText = window.generatedNumbers.join(', ');
});

// Shows the generated numbers that are odd
document.querySelector('#btn1').addEventListener('click', function() {
	output.innerText = window.generatedNumbers.filter(function(i) {
  	return i % 2 !== 0;
  }).join(', ');
});

// Shows the generated numbers that are greater than or equal to 50
document.querySelector('#btn2').addEventListener('click', function() {
	output.innerText = window.generatedNumbers.filter(function(i) {
  	return i >= 50;
  }).join(', ');
});

<button type="button" id="btn">Generate Random Numbers</button>
<button type="button" id="btn1">Get Odd Numbers </button><br/><br/>
<button type="button" id="btn2">Display Numbers Above 50 </button>

<div class="output">

</div>

在0-100之间生成20个随机数，然后显示所有奇数和大于或等于50的

2 个答案: