Question

网站页面上的以下代码创建了一个按钮，用户可以通过单击按钮随时收到随机数：

<!DOCTYPE HTML>

<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>rand100.html</title>
 <style type = "text/css">
 fieldset {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
 }
 label {
  float: left;
  width: 250px;
  text-align: right;
  margin-right: 1em;
  clear: left;
 }
 span {
  float: left;
 }
 button {
  display: block;
  clear: both;
  margin: auto;
 }
 </style>
 <script type = "text/javascript">
 function roll(){
  //create variables for form elements
  var spnRaw = document.getElementById("spnRaw");
  var spn100 = document.getElementById("spn100");
  var spnFinal = document.getElementById("spnFinal");
  //get random number
  var raw = Math.random();
  spnRaw.innerHTML = raw;
  //multiply by 100
  var times100 = raw * 100;
  spn100.innerHTML = times100;
  //get the ceiling
  var final = Math.ceil(times100);
  spnFinal.innerHTML = final;
 } // end roll
 </script>
</head>
<body>
 <h1>Make random numbers 1 - 100</h1>
 <form>
  <fieldset>
   <label>raw</label>
   <span id = "spnRaw">0</span>
   <label>times 100</label>
   <span id = "spn100">0</span>
   <label>final</label>
   <span id = "spnFinal">0</span>
   <button type = "button"
     onclick = "roll()">
    roll the dice
   </button>
  </fieldset>
 </form>
</body>
</html>

现在我想让每个用户只收到一个随机数，也就是说，如果用户点击按钮并收到一个随机数，再次点击按钮，这次就不会显示新的随机数。也就是说，每个用户，如果不止一次，点击按钮，只会收到一个随机数，不再是。我现在该怎么办？即更改代码，以便即使用户打开网站并单击按钮然后接收随机数，再次单击该按钮，也不会收到新的随机数。

Answer 1

请检查以下代码。只需使用一个布尔值doRoll变量并将其设置为true。当您第一次调用roll()时，在获取随机数后将布尔变量设置为false。

<!DOCTYPE HTML>

<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>rand100.html</title>
 <style type = "text/css">
 fieldset {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
 }
 label {
  float: left;
  width: 250px;
  text-align: right;
  margin-right: 1em;
  clear: left;
 }
 span {
  float: left;
 }
 button {
  display: block;
  clear: both;
  margin: auto;
 }
 </style>
 <script type = "text/javascript">
 var doRoll = true;

 function roll(){
  if(doRoll)
  {
  //create variables for form elements
  var spnRaw = document.getElementById("spnRaw");
  var spn100 = document.getElementById("spn100");
  var spnFinal = document.getElementById("spnFinal");
  //get random number
  var raw = Math.random();
  spnRaw.innerHTML = raw;
  //multiply by 100
  var times100 = raw * 100;
  spn100.innerHTML = times100;
  //get the ceiling
  var final = Math.ceil(times100);
  spnFinal.innerHTML = final;
  doRoll = false;
 }
 } // end roll
 </script>
</head>
<body>
 <h1>Make random numbers 1 - 100</h1>
 <form>
  <fieldset>
   <label>raw</label>
   <span id = "spnRaw">0</span>
   <label>times 100</label>
   <span id = "spn100">0</span>
   <label>final</label>
   <span id = "spnFinal">0</span>
   <button type = "button"
     onclick = "roll()">
    roll the dice
   </button>
  </fieldset>
 </form>
</body>
</html>

Answer 2

您可以在函数前定义值：

var random = Math.random();

function roll() {
  ...
}

或者只有在未定义的情况下才将其设置在函数内：

var random;

function roll() {
  if (typeof random === 'undefined') {
    random = Math.random();
  }

  ...
}

或创建一些标志：

var rolled = false;

function roll() {
  if (rolled) {
    return;
  }

  ...

  rolled = true;
}

或者从按钮中删除事件监听器：

function roll() {
  ...

  button.onclick = null;
}

您可以从事件对象获取的按钮对象的链接：

function roll(event) {
  ...

  event.target.onclick = null;
}

该按钮仅运行一次

2 个答案: