白天夜晚模式切换后刷新页面就失效了，如何解决？-php教程-PHP中文网

白天夜晚模式切换后刷新页面就失效了，如何解决？

霞舞

发布： 2025-02-25 13:48:09

原创

615人浏览过

白天/夜晚模式切换失效的解决方法

本文将解决白天/夜晚模式切换后刷新页面失效的问题。问题在于，模式设置没有持久化保存，刷新页面后丢失了之前的选择。以下提供一种改进方案，利用cookie存储模式设置，并在页面加载时读取cookie恢复模式。

问题描述:

一个白天/夜晚模式切换按钮，刷新页面后，选择的模式会丢失。

原代码存在的问题:

提供的代码使用setcookie()函数设置Cookie，但缺少在页面加载时读取Cookie并应用样式的关键步骤。 getreadmode()函数只在按钮图标上应用了模式，而没有将模式应用到标签上，导致样式变化只体现在图标上，刷新后丢失。另外，代码中存在一些错误，例如hasclass应该为hasClass，addclass应该为addClass，removeclass应该为removeClass。 JavaScript代码直接操作DOM，与PHP代码结合不够紧密。

改进后的代码:

为了更清晰地展示，我们将代码结构调整为更易于理解的方式，并使用更标准的JavaScript和PHP语法。

1. JavaScript (script.js):

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

<code class="javascript">function switchReadMode() {
  const body = document.body;
  const btn = document.querySelector('.btn-read-mode');
  const currentMode = body.classList.contains('night-mode') ? 'day' : 'night';
  const nextMode = currentMode === 'day' ? 'night' : 'day';
  const iconClass = nextMode === 'day' ? 'fa fa-sun-o' : 'fa fa-moon-o';

  body.classList.toggle('night-mode');
  btn.querySelector('i').className = iconClass;

  setCookie('read-mode', nextMode);
}

function setCookie(name, value) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 days
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
}

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('.btn-read-mode');
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    switchReadMode();
  });

  // 页面加载时恢复模式
  const mode = getCookie('read-mode');
  if (mode) {
    document.body.classList.add(mode === 'night' ? 'night-mode' : 'day-mode');
    const iconClass = mode === 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
    btn.querySelector('i').className = iconClass;
  }
});

function getCookie(name) {
  const nameEQ = `${name}=`;
  const 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 decodeURIComponent(c.substring(nameEQ.length, c.length));
  }
  return null;
}</code>

登录后复制

2. CSS (style.css): (需要根据你的具体样式调整)

<code class="css">.night-mode {
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}</code>

登录后复制

3. HTML (index.html or relevant template):

<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>白天/夜晚模式</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="btn-read-mode" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <i class="fa"></i>
  </a>
  <script src="script.js"></script>
</body>
</html></code>

登录后复制

这个改进方案使用纯JavaScript来处理模式切换和Cookie操作，避免了PHP和JavaScript混合编程带来的复杂性，使代码更易于维护和理解。记住将script.js和style.css文件放在正确的目录下，并根据你的项目结构调整路径。图片的展示方式未在代码中体现，请根据你的实际情况添加。

白天夜晚模式切换后刷新页面就失效了，如何解决？

这个改进的方案更简洁、高效，并且更容易理解和维护。它完全解决了刷新页面后模式失效的问题。记住根据你的实际项目结构调整文件路径。

以上就是白天夜晚模式切换后刷新页面就失效了，如何解决？的详细内容，更多请关注php中文网其它相关文章！