Question

以下代码创建一个HTML页面，用户通过单击按钮接收随机数。

<!DOCTYPE HTML>

<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>random page</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 spnCode = document.getElementById("spnCode");
  //get random number

  //get the ceiling
  var code = 1325 + Math.floor(Math.random() * 36);
  spnCode.innerHTML = code;
  doRoll = false;
 }
 } // end roll
 </script>
</head>
<body>
 <h1>random number</h1>
 <form>
  <fieldset>

   <label>code</label>
   <span id = "spnCode">0</span>
   <button type = "button"
     onclick = "roll()">
    create the code
   </button>
  </fieldset>
 </form>
</body>
</html>

编写代码时，用户只需按一下按钮就会收到一个随机数，也就是说，如果用户再次单击该按钮，则不会收到新的随机数;但如果单击“重新加载”，则浏览器页面上的按钮，然后单击生成数字按钮，它将收到一个新的随机数。

我现在如何关闭我网站浏览器页面上的重新加载按钮？也就是说，如果用户单击其浏览器页面上的“重新加载”按钮，则该站点不会重新加载，并且用户无法接收另一个新的随机数。我会在我的网站的浏览器中禁用重新加载按钮。收到随机数并单击其浏览器页面上的“重新加载”按钮后，用户将无法加载该站点，他们将无法添加其他随机数。

另一个问题：

用户收到随机数并关闭网站后，在重新请求通过浏览器的历史记录打开浏览器并获取新的随机数后，历史记录中不存在该URL，如何做到这一点？ / p>

Answer 1

首先你应该从你的html中删除表单并实现你想要的你应该使用localStorage

您的Html代码

  <h1>random number</h1>
  <label>code</label>
  <span id="spnCode">0</span>
  <button id="generate_btn" class="button" onclick="roll()">
  create the code
  </button>

你的javascript代码

 $(function() {
   if (localStorage.getItem("clicked") === 'true') {
     $('#generate_btn').prop("disabled", true);
   }
 });


 function roll() {
   //create variables for form elements
   var spnCode = document.getElementById("spnCode");
   //get the ceiling
   var code = 1325 + Math.floor(Math.random() * 36);
   spnCode.innerHTML = code;
   localStorage.setItem("clicked", true);
   console.log(localStorage.getItem("clicked"));
   $('#generate_btn').prop("disabled", true);

 }

和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;
}

并且你还应该包含jquery，因为我已经使用了jquery，你也可以在javascript中使用它。请参阅Jsfedded to see working code

此代码用于在浏览器关闭时删除localStorage

$(window).unload(function(){
  localStorage.removeItem("clicked");
});

禁用浏览器上的重新加载按钮，并且不在html页面的浏览器历史记录中包含信息

1 个答案: