如何在 JavaScript 和 HTML 中禁用测验开始按钮并持久化状态-html教程-PHP中文网

如何在 JavaScript 和 HTML 中禁用测验开始按钮并持久化状态

心靈之曲

发布： 2025-11-17 12:02:25

原创

367人浏览过

如何在 javascript 和 html 中禁用测验开始按钮并持久化状态

本教程将介绍如何使用 Cookie 在 JavaScript 和 HTML 中禁用测验的开始按钮，并在用户刷新浏览器后保持禁用状态。通过设置 Cookie，我们可以记录按钮的点击状态，并在页面重新加载时读取该状态，从而实现持久化的禁用效果。

使用 Cookie 持久化按钮状态

在测验应用中，我们经常需要禁用“开始”按钮，防止用户重复启动测验。更进一步，我们希望即使在用户刷新浏览器后，该按钮仍然保持禁用状态。这可以通过使用 Cookie 来实现。Cookie 是一种存储在用户浏览器中的小型文本文件，可以用来保存用户数据，并在页面重新加载后仍然可用。

实现步骤

HTML 结构:

首先，确保你的 HTML 结构中包含一个“开始”按钮，并为其添加一个唯一的 ID。

立即学习“Java免费学习笔记（深入）”；

如知AI笔记
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情
```
<button id="startButton">开始测验</button>
```
登录后复制

JavaScript 代码:

接下来，使用 JavaScript 来处理按钮的点击事件，设置 Cookie，并在页面加载时检查 Cookie。

document.addEventListener('DOMContentLoaded', function() {
  const startButton = document.getElementById('startButton');

  // 检查 Cookie 是否存在
  if (getCookie('quizStarted') === 'true') {
    startButton.disabled = true;
  }

  // 按钮点击事件处理函数
  startButton.addEventListener('click', function() {
    // 禁用按钮
    startButton.disabled = true;

    // 设置 Cookie，有效期为一天
    setCookie('quizStarted', 'true', 1);

    // 这里可以添加启动测验的逻辑
    console.log('测验已启动！');
  });

  // 设置 Cookie 函数
  function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      let date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }

  // 获取 Cookie 函数
  function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
});

登录后复制

代码解释:

document.addEventListener('DOMContentLoaded', function() { ... });：确保在 DOM 加载完成后执行代码。
getCookie('quizStarted') === 'true'：页面加载时检查名为 quizStarted 的 Cookie 是否存在且值为 true。如果存在，则禁用按钮。
startButton.addEventListener('click', function() { ... });：为按钮添加点击事件监听器。
startButton.disabled = true;：禁用按钮。
setCookie('quizStarted', 'true', 1);：设置 Cookie quizStarted 的值为 true，有效期为 1 天。
setCookie(name, value, days)：自定义的设置 Cookie 的函数，可以设置 Cookie 的名称、值和有效期。
getCookie(name)：自定义的获取 Cookie 值的函数。

注意事项

Cookie 的有效期: 在 setCookie 函数中，可以根据实际需求调整 Cookie 的有效期。如果需要永久禁用按钮，可以将有效期设置为较长的时间。
Cookie 的安全性: Cookie 存储在客户端，因此不适合存储敏感信息。
Cookie 的大小限制: 浏览器对 Cookie 的大小有限制，一般为 4KB。