MDUI
首页
注册

简单写了一个在当前框架下自动根据时间切换背景色的工具

lijialong1313
2020-07-03 14:45:33

这个东西是传统html用的,Vue家族之类应该不需要我这么麻烦。

这个东西比较简单,分为3部分。

1.定义一个“时间”事件,代码大概如下。(该事件叫change_style

    // 提前定义好事件
    var changeStyle = new CustomEvent('change_style', {
        detail: { }
    });

2.需要进行更改的页面注册这个事件

    //注册监听器
    window.addEventListener('change_style', function(event){
        $$('body').toggleClass('mdui-theme-layout-dark');
    });

上面代码就是给body加入夜间主题。

3.执行这个事件

    function change_style(){
        // 在对应的元素上触发该事件
        if(window.dispatchEvent) {
            window.dispatchEvent(changeStyle);
        } else {
            //ie8兼容
            window.fireEvent(changeStyle);
        }
    }

大概代码如上。