如何向html中生成的列表项添加随机数

Question

I'm working on a project to create a workout generator.我正在做一个项目来创建一个锻炼生成器。 I'm trying to figure out how to add a random number (between 4 to 12 next to the exercises that get generated on refresh).我想弄清楚如何添加一个随机数（在刷新时生成的练习旁边的 4 到 12 之间）。 Here is a basic of what I'm working with.这是我正在使用的基础知识。

<html>
<form>
    <input onclick="history.go(0)" value="refresh" type="button">
</form>

<h4>exercises</h4>
<ul>
    <div id="exercise"></div>
</ul>

<script type="text/javascript">
var exerciseOptions=[
"db thruster",
"hand release burpees",
"db man maker",
"bb bear complex",
"tyre flip",
"wall ball shot",
"ball over shoulder throw",
"plate get up",
"plyo lunges",
"racked db lunges",
"jump squats",
"double mountain climber",
"broad jumps",
"kb goblet squats",
"bb squats",
"bb front squat",
"bb deadlift",
"box jump",
"box jump over",
"burpee box jump over",
"burpee box jump",
"plate overhead lunge",
"sandbag clean",
"handstand push up",
"hand release push ups",
"ring dips",
"burpee pull up",
"bb bench press",
"bb clean",
"bb hang clean",
"bb clean and press",
"bb hang clean and press",
"kb swings",
"bb strict shoulder press",
"bb push press",
"pull up",
"kb sumo deadlift high pulls",
"alternating db snatches",
"sit ups",
"commandos",
"commandos push ups",
"plate sit up",
"toes to bar",
];

var exercise = "";
for (var i = 0; i < 5; 
    rand = Math.random();
    var index = Math.floor(rand * exerciseOptions.length);
    //splice removes the element from the original array and returns the removed element(s)
    exercise = exercise + "<div>" + exerciseOptions.splice(index,1); + "</div>";
    //exerciseOptions = exerciseOptions.remove(index);
    //exerciseOptions = 
}
document.getElementById("exercise").innerHTML = exercise;
</script>
</html>

Answer 1

Can you explain the use case for updating this on an explicit refresh?你能解释一下在显式刷新时更新它的用例吗？ Wouldn't it be better to just do this on page load so each time the page is visited you get the updated values?在页面加载时执行此操作，以便每次访问页面时都获得更新的值不是更好吗？ If you need or would like a button to give you a new set of values, you could make a function that returns the exercises with the randomized values and have both the onload and then an onclick produce new results.如果您需要或想要一个按钮来为您提供一组新值，您可以创建一个函数，该函数返回带有随机值的练习，并让 onload 和 onclick 产生新的结果。

Having a button in a form that does a refresh though just feels odd.有一个可以刷新表单的按钮，但感觉很奇怪。 It may be correct though depending on what you're trying to do which is why I think a bit more context would help.这可能是正确的，但这取决于您要尝试做什么，这就是为什么我认为更多上下文会有所帮助。

You can achieve a random number between two values with Math.random() so you're on the right track.您可以使用Math.random()在两个值之间实现随机数，因此您走在正确的轨道上。 Sometimes though you do just have to read the documentation.有时虽然你只需要阅读文档。 I find MDN is a great source for this type of stuff.我发现 MDN 是此类内容的重要来源。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

The section "Getting a random number between two values" should be able to get you a value between 4 and 12. “获取两个值之间的随机数”部分应该能够为您提供 4 到 12 之间的值。

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

Answer 2

I hope adding this to your script answers your question right:我希望将此添加到您的脚本中可以正确回答您的问题：

var random= Math.floor(Math.random() * (12 - (5)) ) + 4;
rand = Math.floor(Math.random());
var index = Math.floor(rand * exerciseOptions.length);
exercise = exercise + "<div>" + exerciseOptions.splice(index,1)+ " :&nbsp; "+random + "</div>";

如何向html中生成的列表项添加随机数

问题描述

2 个解决方案

解决方案1
0 2019-12-13 05:39:07

解决方案2
0 已采纳 2019-12-13 05:59:13

如何向html中生成的列表项添加随机数

问题描述

2 个解决方案

解决方案1 0 2019-12-13 05:39:07

解决方案2 0 已采纳 2019-12-13 05:59:13

解决方案1
0 2019-12-13 05:39:07

解决方案2
0 已采纳 2019-12-13 05:59:13