时间戳

首页 > 解决方案 > 如何在html中向生成的列表项添加随机数

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

问题描述

我正在做一个项目来创建一个锻炼生成器。我试图弄清楚如何添加一个随机数（在刷新时生成的练习旁边的 4 到 12 之间）。这是我正在使用的基本内容。

<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>

标签： javascripthtml

解决方案

你能解释一下在显式刷新时更新它的用例吗？仅在页面加载时执行此操作不是更好，因此每次访问页面时您都会获得更新的值？如果您需要或想要一个按钮来为您提供一组新的值，您可以创建一个函数来返回带有随机值的练习，并让 onload 和 onclick 产生新的结果。

有一个表单中的按钮可以进行刷新，但感觉很奇怪。这可能是正确的，但这取决于您尝试做什么，这就是为什么我认为更多的上下文会有所帮助。

您可以在两个值之间获得一个随机数，Math.random()这样您就走在了正确的轨道上。有时您只需要阅读文档即可。我发现 MDN 是这类东西的一个很好的来源。

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

“获取两个值之间的随机数”部分应该能够为您提供 4 到 12 之间的值。

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

推荐阅读