禁用JavaScript和HTML测验中的重新开始按钮-html教程-PHP中文网

禁用JavaScript和HTML测验中的重新开始按钮

花韻仙語

发布： 2025-11-21 10:49:02

原创

952人浏览过

禁用javascript和html测验中的重新开始按钮

本文旨在提供一种防止用户在JavaScript和HTML测验中重复开始测验的方法。通过使用Cookie，即使在刷新浏览器后，也能保持开始按钮的禁用状态，从而确保测验的完整性和防止作弊行为。本文将详细介绍如何利用JavaScript创建和检查Cookie来实现这一目标。

使用Cookie禁用开始按钮

在JavaScript和HTML测验中，防止用户重复开始测验是一个常见需求。一种有效的方法是使用Cookie来记录测验的开始状态，并在用户刷新页面后仍然保持该状态。

实现步骤：

点击开始按钮时创建Cookie: 当用户点击开始按钮时，使用JavaScript创建一个Cookie。该Cookie用于标记测验已经开始。

立即学习“Java免费学习笔记（深入）”；
```
document.getElementById("startButton").addEventListener("click", function() {
  document.cookie = "quizStarted=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
  document.getElementById("startButton").disabled = true;
  // 其他开始测验的逻辑
});
```
登录后复制
- quizStarted=true: 设置Cookie的名称为quizStarted，值为true，表示测验已经开始。
- expires=Fri, 31 Dec 9999 23:59:59 GMT: 设置Cookie的过期时间。这里设置为一个遥远的未来日期，意味着Cookie将长期有效，除非用户手动清除或代码删除。GMT 表示格林尼治标准时间。
- path=/: 指定Cookie的有效路径。/ 表示Cookie对整个网站有效。
- document.getElementById("startButton").disabled = true;: 禁用开始按钮。
页面加载时检查Cookie: 在页面加载时，检查是否存在quizStarted Cookie。如果存在，则禁用开始按钮。

DeepBrain
AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

94

查看详情
```
window.onload = function() {
  if (document.cookie.indexOf("quizStarted=true") !== -1) {
    document.getElementById("startButton").disabled = true;
  }
};
```
登录后复制
- window.onload = function() { ... }: 确保在页面完全加载后执行代码。
- document.cookie.indexOf("quizStarted=true") !== -1: 检查Cookie字符串中是否包含quizStarted=true。如果包含，则表示测验已经开始。
- document.getElementById("startButton").disabled = true;: 禁用开始按钮。
清除Cookie (可选): 在测验结束或用户完成测验后，可以清除Cookie，以便用户可以重新开始测验。
```
function clearQuizCookie() {
  document.cookie = "quizStarted=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  document.getElementById("startButton").disabled = false;
}
```
登录后复制
- document.cookie = "quizStarted=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";: 通过将Cookie的过期时间设置为过去的日期来清除Cookie。
- document.getElementById("startButton").disabled = false;: 重新启用开始按钮。通常在测验完成后调用此函数。

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Quiz</title>
</head>
<body>

  <button id="startButton">Start Quiz</button>

  <script>
    document.getElementById("startButton").addEventListener("click", function() {
      document.cookie = "quizStarted=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
      document.getElementById("startButton").disabled = true;
      // 其他开始测验的逻辑
      console.log("Quiz started!");
    });

    window.onload = function() {
      if (document.cookie.indexOf("quizStarted=true") !== -1) {
        document.getElementById("startButton").disabled = true;
      }
    };

    function clearQuizCookie() {
      document.cookie = "quizStarted=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      document.getElementById("startButton").disabled = false;
      console.log("Quiz can be restarted.");
    }

    // 假设测验完成后调用 clearQuizCookie()
    // setTimeout(clearQuizCookie, 5000); // 5秒后清除Cookie，用于测试
  </script>

</body>
</html>

登录后复制

注意事项：