白天/夜晚模式切换失效的解决方法
本文将解决白天/夜晚模式切换后刷新页面失效的问题。 问题在于，模式设置没有持久化保存，刷新页面后丢失了之前的选择。以下提供一种改进方案，利用cookie存储模式设置，并在页面加载时读取cookie恢复模式。
问题描述:
一个白天/夜晚模式切换按钮，刷新页面后，选择的模式会丢失。
原代码存在的问题:
提供的代码使用setcookie()函数设置Cookie，但缺少在页面加载时读取Cookie并应用样式的关键步骤。 getreadmode()函数只在按钮图标上应用了模式，而没有将模式应用到标签上，导致样式变化只体现在图标上，刷新后丢失。 另外，代码中存在一些错误，例如hasclass应该为hasClass，addclass应该为addClass，removeclass应该为removeClass。 JavaScript代码直接操作DOM，与PHP代码结合不够紧密。
改进后的代码:
为了更清晰地展示，我们将代码结构调整为更易于理解的方式，并使用更标准的JavaScript和PHP语法。
1. JavaScript (script.js):
<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文件放在正确的目录下，并根据你的项目结构调整路径。 图片的展示方式未在代码中体现，请根据你的实际情况添加。
这个改进的方案更简洁、高效，并且更容易理解和维护。 它完全解决了刷新页面后模式失效的问题。 记住根据你的实际项目结构调整文件路径。
