极客观点
项目管理
HarmonyOS
问题描述
我按照网上的方法，我的网站https://798city.com 在footer.php底部添加白天夜晚模式切换代码 ,刷新或者点击链接后，当前模式不能保持，帮我分析下怎么处理？
如果能直接贴代码就最好了，刚刚学习代码 ，动手能力有点差！有时只给个思路，我还是不知道怎么操作
<!-- 黑暗模式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function switchReadMode() { //切换显示模式
var btn = $('.btn-read-mode');
var next_mode = $('body').hasClass('night-mode') ? 'day': 'night';
var mode = next_mode == 'day' ? '': 'night-mode';
var icon = next_mode == 'day' ? 'fa fa-sun-o': 'fa fa-moon-o';
if (next_mode == 'day') {
$('body').removeClass('night-mode');
} else {
$('body').addClass('night-mode');
}
btn.find('i').attr('class', icon);
setCookie("read-mode", next_mode);
}
$('.btn-read-mode').click(function(e) {
e.preventDefault();//阻止点击打开超链接"#"事件
switchReadMode();
});//这个触发事件主体
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
var path = ';path=/';
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + path;
}
</script>
在function.php中填写
function getReadMode($icon=false){
$class = $_COOKIE['read-mode'];//获取cookie
if($icon){
$class = $class == 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
}else{
$class = 'night' == $class ? 'night-mode' : '';
}
echo $class;
}在网页中显示按钮处填写
<a class="btn-read-mode" href="#"><i class="<?php getReadMode(true);?>"></i></a> 目前能够实现白天夜晚切换，可是一刷新，或者换网页，夜晚模式不能保持，请问这怎么处理？
怎样让我在不重新打开浏览器时，保持我手动切换的浏览模式？
css代码
/*白天模式*/
body{
background-color: #FFF;
color: #444;
}
a {
color: #2c3e50;
text-decoration: none;
}
a:hover,a:active {
color: #e74c3c;
}
#logo{
color: #2c3e50;
font-size: 2.5em;
}
#nav-menu a {
color: #444;
}
/*夜晚模式*/
body.night-mode {
background-color: #272727;
color: #aaa;
}
body.night-mode img {
filter: brightness(90%);
}
body.night-mode a {
color: white;
text-decoration: none;
}
body.night-mode a:hover,a:active {
color: #e74c3c;
}
body.night-mode #logo{
color: #d9e3ec;
font-size: 2.5em;
}
body.night-mode #nav-menu a {
color: #d9e3ec;
}
/*公用css部分*/
body {
font-size: 92.5%;
font-family: "Droid Serif",Georgia,"Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
}
.post-tags {
padding-left:10px;
margin: 30px 0 0;
}
.post-tags a {
border: 3px solid rgba(0,135,234,.2);
padding: 5px;
background-color: rgba(0,134,234,.5);
color: white; !important
}
.post-tags a:hover,.post-tags a:active {
border: 3px solid rgba(231,76,60,.2);
padding: 5px;
background-color: rgba(231,76,60,.5);
}
.post-read {
padding-left:10px;
margin: 30px 0 0;
}
.post-read a {
border: 3px solid rgba(0,135,234,.8);
padding: 5px;
background-color: rgba(0,134,234,.9);
color: white; !important
}
.post-read a:hover,.post-tags a:active {
border: 3px solid rgba(231,76,60,.2);
padding: 5px;
background-color: rgba(231,76,60,.5);
}
pre,code {
background: #F3F3F3;
font-size: .92857em;
font-family: Menlo,Monaco,Consolas,"Lucida Console","Courier New",monospace;
}
code {
padding: 2px 4px;
color: #B94A48;
}
pre {
overflow: auto;
padding: 8px;
max-height: 400px;
}
pre code {
padding: 3px;
color: #444;
}
blockquote {
margin: 1em 0;
padding-left: 1.5em;
border-left: 4px solid #eee;
color: #666;
}
table {
width: 100%;
border: 1px solid #ddd;
}
table th,table td {
padding: 5px 10px;
border: 1px solid #eee;
}
table th {
background: #f3f3f3;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif;
}
input[type="text"],input[type="email"],input[type="url"],input[type="password"],textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
width: 100%;
border: 1px solid #E9E9E9;
border-radius: 2px;
}
textarea {
resize: vertical;
}
.post-meta a,.post-content a,.widget a,.comment-content a {
border-bottom: 1px solid #EEE;
}
.post-meta a:hover,.post-content a:hover,.widget a:hover,.comment-content a:hover {
border-bottom-color: transparent;
}
.browsehappy {
padding: 8px 0;
background: #FBE3E4;
color: #8A1F11;
text-align: center;
}
.browsehappy a {
color: #8A1F11;
text-decoration: underline;
font-weight: bold;
}
#header {
padding-top: 35px;
border-bottom: 1px solid #EEE;
}
#logo {
font-size: 2.5em;
}
#logo img {
max-height: 64px;
}
.description {
margin: .5em 0 0;
color: #999;
font-style: italic;
}
#nav-menu {
margin: 25px 0 0;
padding: 0;
}
#nav-menu a {
float: left;
display: block;
margin-right: -1px;
padding: 0 20px;
height: 32px;
border: 1px solid #EEE;
border-bottom: none;
line-height: 32px;
}
#nav-menu a:hover,#nav-menu .current {
background: #2c3e50;
color:white;
}
#search {
position: relative;
margin-top: 15px;
}
#search input {
padding-right: 30px;
}
#search button {
position: absolute;
top: 2px;
right: 4px;
padding: 0;
width: 24px;
height: 24px;
border: none;
background: transparent url(img/icon-search.png) no-repeat center center;
text-indent: -9999em;
direction: ltr;
}
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
#search button {
background-image: url(img/icon-search@2x.png);
background-size: 24px 24px;
-webkit-background-size: 24px 24px;
-moz-background-size: 24px 24px;
-o-background-size: 24px 24px;
}
}
.post {
padding: 15px 0 20px;
border-bottom: 1px solid #EEE;
}
.post-title {
margin: .83em 0;
font-size: 1.4em;
}
.post-meta {
margin-top: -0.5em;
padding: 0;
color: #999;
font-size: .92857em;
}
.post-meta li {
display: inline-block;
margin: 0 8px 0 0;
padding-left: 12px;
border-left: 1px solid #EEE;
}
.post-meta li:first-child {
margin-left: 0;
padding-left: 0;
border: none;
}
.post-content {
line-height: 1.15;
font-size: 100%;
}
.post .tags {
clear: both;
}
.post-near {
margin: 30px 0;
padding: 0;
color: #999;
list-style: none;
}
.post-near li {
margin: 10px 0;
}
.archive-title {
margin: 1em 0 -1em;
padding-top: 20px;
color: #999;
font-size: 1em;
}
.archive-move-on {
color: #999;
}
.more {
text-align: center;
}
.more a {
border: none;
}
.protected .text {
width: 50%;
}
.page-navigator {
margin: 25px 0;
padding: 0;
list-style: none;
text-align: center;
}
.page-navigator li {
display: inline-block;
margin: 0 4px;
}
.page-navigator a {
display: inline-block;
padding: 0 10px;
height: 30px;
line-height: 30px;
}
.page-navigator a:hover {
background: #EEE;
text-decoration: none;
}
.page-navigator .current a {
background: #EEE;
color: #444;
}
#comments {
padding-top: 15px;
}
.comment-list,.comment-list ol {
margin: 0;
padding: 0;
list-style: none;
}
.comment-list li {
margin-top: 10px;
padding: 14px;
border: 1px solid #EEE;
}
.comment-list li.comment-level-odd {
background: #F6F6F3;
}
.comment-list li.comment-level-even {
background: #FFF;
}
.comment-list li.comment-by-author {
background: #FFF9E8;
}
.comment-list li .comment-reply {
text-align: right;
font-size: .92857em;
}
.comment-meta a {
color: #999;
font-size: .92857em;
}
.comment-author {
display: block;
margin-bottom: 3px;
color: #444;
}
.comment-author .avatar {
float: left;
margin-right: 10px;
}
.comment-author cite {
font-weight: bold;
font-style: normal;
}
.comment-list .respond {
margin-top: 15px;
border-top: 1px solid #EEE;
}
.respond .cancel-comment-reply {
float: right;
margin-top: 15px;
font-size: .92857em;
}
#comment-form label {
display: block;
margin-bottom: .5em;
font-weight: bold;
}
#comment-form .required:after {
color: #C00;
content: " *";
}
#secondary {
padding-top: 15px;
word-wrap: break-word;
}
.widget {
margin-bottom: 30px;
}
.widget-list {
padding: 0;
list-style: none;
}
.widget-list li {
margin: 5px 0;
line-height: 1.6;
}
.widget-list li ul {
margin-left: 15px;
}
#footer {
padding: 3em 0;
color: #999;
text-align: center;
line-height: 1.5;
}
.error-page {
margin-top: 100px;
margin-bottom: 100px;
}
.post-content,.comment-content {
word-wrap: break-word;
line-height: 2;
}
.post-content h2,.comment-content h2 {
font-size: 1.28571em;
}
.post-content img,.comment-content img,.post-content video,.comment-content video {
max-width: 100%;
}
.post-content a img,.comment-content a img {
position: relative;
bottom: -4px;
background: #FFF;
}
.post-content hr,.comment-content hr {
margin: 2em auto;
width: 100px;
border: 1px solid #E9E9E9;
border-width: 2px 0 0 0;
}
.aligncenter,div.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
img.alignleft {
margin: 0 15px 0 0;
}
img.alignright {
margin: 0 0 0 15px;
}
@media(max-width:767px) {
body {
font-size: 100%;
}
#nav-menu a {
float: none;
display: inline-block;
margin: 0 -2px;
}
}
@media(max-width:768px) {
#header,.post-title,.post-meta {
text-align: center;
}
}
@media(min-width:1200px) {
.container {
max-width: 952px;
}
}
.hidden {
display: none!important;
visibility: hidden;
}
.sr-only {
position: absolute;
overflow: hidden;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0;
}
.sr-only.focusable:active,.sr-only.focusable:focus {
position: static;
overflow: visible;
clip: auto;
margin: 0;
width: auto;
height: auto;
}
.invisible {
visibility: hidden;
}
.intro-header {
background:no-repeat center center ;
background-color:#808080;
background-attachment:scroll;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
margin-bottom:30px
}
.intro-header .site-heading,.intro-header .post-heading {
padding:100px 0 50px;
color:white
}
span.view-times::before {
font: normal normal normal 12px/1 FontAwesome;
content: "\f06e";
margin-right: 3px;
}
.button { /* 按钮美化 */
width: auto; /* 宽度 */
height: 25px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #2c3e50; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 15px; /* 字体大小 */
}
.button:hover { /* 鼠标移入按钮范围时改变颜色 */
background-color:#e74c3c;
}
刷新页面后，html页面里的body没有带上当前模式的class