MDUI
首页
注册

mdui最简单的日夜切换

xiaohu
什么都不懂,又好像什么都懂
2021-04-03 18:58:53

这几天在写一个小玩意儿,然后起义要写个日夜切换,刚好又在这里发现了一个 大牛写的根据时间来设置,但是发现切换后刷新就没了,所以感觉作用不大,我就自己写了个刷新不会变的,哈哈哈

首先说明,本人对前端不是很熟,要是代码有毛病或者不规则还请包含哦!

var $$ = mdui.$;
// 日夜切换
function change_style() {
    // 先判断body里面是否包含mdui-theme-layout-dark这个类
    if ($$('body').hasClass('mdui-theme-layout-dark')) {
        // 如果包含这个类的话,就删除这个类
        $$('body').removeClass('mdui-theme-layout-dark');
        // 并设置浏览器存储
        localStorage.setItem("change_theme", '2');
    } else {
        // 如果包含这个类的话,就添加这个类
        $$('body').addClass('mdui-theme-layout-dark');
        // 并且把存储值改成1
        localStorage.setItem("change_theme", '1');
    }
}
// 那么接下来就是判断存储的值了
// 假设值等于1,那我们就添加这个类
// 不然的话就删掉这个类
// 注意: 这一段是防止刷新之后恢复原来的颜色
if (localStorage.getItem("change_theme") == '1') {
    $$('body').addClass('mdui-theme-layout-dark');
} else {
    $$('body').removeClass('mdui-theme-layout-dark');
}

就是这样了,不好别骂我,只是分享一下