白天/夜晚模式切换失效的解决方法
本文将解决白天/夜晚模式切换后刷新页面失效的问题。 问题在于，模式设置没有持久化保存，刷新页面后丢失了之前的选择。以下提供一种改进方案，利用cookie存储模式设置，并在页面加载时读取cookie恢复模式。
问题描述:
一个白天/夜晚模式切换按钮，刷新页面后，选择的模式会丢失。
原代码存在的问题:
提供的代码使用setcookie()函数设置Cookie，但缺少在页面加载时读取Cookie并应用样式的关键步骤。 getreadmode()函数只在按钮图标上应用了模式，而没有将模式应用到标签上，导致样式变化只体现在图标上，刷新后丢失。 另外，代码中存在一些错误，例如hasclass应该为hasClass，addclass应该为addClass，removeclass应该为removeClass。 JavaScript代码直接操作DOM，与PHP代码结合不够紧密。
改进后的代码:
为了更清晰地展示，我们将代码结构调整为更易于理解的方式，并使用更标准的JavaScript和PHP语法。
1. JavaScript (script.js):
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;}
2. CSS (style.css): (需要根据你的具体样式调整)
.night-mode { background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;}
3. HTML (index.html or relevant template):
这个改进方案使用纯JavaScript来处理模式切换和Cookie操作，避免了PHP和JavaScript混合编程带来的复杂性，使代码更易于维护和理解。 记住将script.js和style.css文件放在正确的目录下，并根据你的项目结构调整路径。 图片的展示方式未在代码中体现，请根据你的实际情况添加。
这个改进的方案更简洁、高效，并且更容易理解和维护。 它完全解决了刷新页面后模式失效的问题。 记住根据你的实际项目结构调整文件路径。
以上就是白天夜晚模式切换后刷新页面就失效了，如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1253861.html
微信扫一扫 
支付宝扫一扫 
