所以卡在这里有点, 我正在尝试创建一个随机数生成器,该生成器从 1-6 生成两个不同的数字,例如:Dice Roll is "1" "6"
.我创建了两个不同的变量,它们从 1-6 生成,认为两者都会显示但不会显示?我做错了什么?
我的代码是
function myFunction() {
var p = document.getElementById("mydata"); // get the paragraph
var result = Math.floor( Math.random() * 7);
var result2 = Math.floor( Math.random() * 7);
p.innerHTML = "Dice rolls are " + result +result2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 4 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task4.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata">Roll Dice </p>
<!--Create a roll dice button-->
<p> <button onclick="myFunction();"> Roll Dice </button></p>
</div>
</body>
</html>
我想要它,以便它像这样显示而不是总和 图像
它确实有效,只是一个小问题,使用您当前的代码,您实际上可以得到 0,这没有意义。以下是实际完成所需内容所需的代码。另外,我更改了它,以便最小值和最大值可以与参数一起使用。
function rollDices(min, max) {
var p = document.getElementById("mydata");
var result1 = Math.floor(Math.random() * (max - min + 1)) + min;
var result2 = Math.floor(Math.random() * (max - min + 1)) + min;
p.innerHTML = "Dice rolls are "" + result1 + "" "" + result2 + """;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 4 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task4.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata">Roll Dice </p>
<!--Create a roll dice button-->
<p> <button onclick="rollDices(1,6);"> Roll Dice </button></p>
</div>
</body>
</html>
最终结果将是:掷骰子是"X"Y"。
它确实有效。尝试打开 devtools 并禁用缓存或将脚本标记切换到
<script src="task4.js?version=2" type="text/javascript"></script>
编辑: 它不显示总和。它只是并排显示数字。 您只需要使用字符串连接添加引号。例如
window.rollDice = _ => {
const rnd = _ => ~~(Math.random() * 7)
document.getElementById("mydata").innerHTML = `Dice rolls are "${rnd()}" "${rnd()}"`
}
*{font-family:futura,helvetica !important;text-transform:uppercase;}body{background:linear-gradient(135deg,#42e695 0,#3bb2b8 100%);background-repeat:no-repeat;height:100vh;width:100%;padding:2px}button{font-size: 1rem;transition:all 500ms ease-out;display:inline-flex; margin: 5px;background:#FAFAFA;padding:20px;border-radius:5px;box-shadow:0 20px 50px -10px rgba(0,0,0,.2)}p{font-size:2rem;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.2)}button:focus{outline:none;transform:rotate(360deg);cursor:pointer;}button.active{filter:invert(100%)}.months{display:flex;flex-direction: column wrap;flex-wrap:wrap;justify-content:flex-start;align-items: flex-end;}p{color:white;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 4 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task4.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata">Roll Dice</p>
<!--Create a roll dice button-->
<p> <button id="diceroller" onclick="rollDice();"> Roll Dice </button></p>
</div>
</body>
</html>
从 1-6 认为两者都会显示但不会显示?
其他答案并没有真正解决你所说的问题。
所以,它似乎对我来说工作正常。
但是,如果您打开检查器(Ctrl + Shift + I 表示 chrome(并单击"控制台"选项卡。它可能会揭示出什么问题。
String.format = function () {
if (arguments.length == 0)
return null;
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var re = new RegExp('\{' + (i - 1) + '\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
}
试试这个代码
String.format("Dice rolls are {0} and {1}", result, result2);
为避免卷结果为 0,您可以使用:var result = Math.floor( Math.random() * 6) + 1
p.innerHTML = "掷骰子是" + 结果 +结果2;
-> p.innerHTML = "掷骰子是" + 结果 + 结果2;