javascript - 如何选择生成多少个随机字符串?
问题描述
我正在尝试创建一个随机名称生成器。如何选择生成多少个字符串而不必复制和粘贴如此多的重复代码?有没有办法有一个输入框,我可以在其中输入一个数字,它会产生那个数量?
function generator() {
var planets = ["mercury","venus","earth","mars","jupiter","saturn","uranus","neptune","pluto"];
var planets = planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
+ planets[Math.floor(Math.random() * planets.length)] + " "
;
if (document.getElementById("planets")) {
document.getElementById("placeholder").removeChild(document.getElementById("planets"));
}
var element = document.createElement("div");
element.setAttribute("id", "planets");
element.appendChild(document.createTextNode(planets));
document.getElementById("placeholder").appendChild(element);
}
解决方案
我将假设您不仅要选择随机名称,而且该随机选择中没有重复项。
最简单的方法是使用随机打乱数组的函数。你可以从这里“借出”一个实现。
注意:似乎没有充分的理由删除并重新创建文档中的植物元素。只是重复使用它。
这是与行星数组的简单集成以及用于指定数字的输入:
let planets = ["mercury","venus","earth","mars","jupiter","saturn","uranus","neptune","pluto"];
let button = document.querySelector("#generate");
let input = document.querySelector("#num");
let output = document.querySelector("#planets");
button.addEventListener("click", generate);
function generate() {
// Shuffle the planets randomly
shuffle(planets);
// Select only the number of planets that the user wants
let selected = planets.slice(0, +input.value);
// output the result, space-separated
output.textContent = selected.join(" ");
}
function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
number of planets: <input type="number" id="num" size="3" value="4">
<button id="generate">Generate</button><br>
<div id="planets"></div>
推荐阅读
- node.js - 邮递员请求不起作用(Node.JS 和 MongoDB)
- r - 如何对R中的列进行滚动求和?
- oracle - 如何根据 Oracle Apex 中其他列的值启用或禁用列中的按钮?
- php - 注意:未定义索引:img in
- reactjs - 如何在 react-redux 中存储和检索对象?[订阅本地存储的对象]
- python - Microsoft Azure text to Speech 如何不说话直接保存文件?
- javascript - 基于列 javascript 的搜索表
- python - 如何使用正则表达式从python中的字符串中获取单词
- react-native - 检测浏览器后退按钮点击反应原生
- javascript - 如何在 highcharts.js 中更改 RangeSelector 滚动条内的系列图显示