webworker和darkmode笔记

最新推荐文章于 2023-07-10 17:40:22 发布

乐橙Web

最新推荐文章于 2023-07-10 17:40:22 发布

阅读量212

点赞数

分类专栏： H5，CSS3 JS 文章标签： javascript css html5

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/108567452

版权

JS 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

H5，CSS3

10 篇文章 0 订阅

订阅专栏

整体思维导图

在这里插入图片描述

webworker使用case

一：使用高斯模糊过来的图做背景图，放在新的线程中
二：ajax做轮询
三：主要思路是在 Worker 中进行相对开销较大的 DOM Diff，将 patch 结果发回主线程，由主线程在真实 DOM 上应用修改。因此需要在 Worker 中实现 virtual DOM，相信这也是 WorkerDOM 名称的由来吧

应用场景传送门

一行代码全站进入悼念模式

把替换成即可，简单粗暴。当然，核心代码是filter:grayscale(1)，意思是「把当前元素及其后代元素设置成100%的灰度模式。

暗黑模式

媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* * {
        padding: 0;
        margin: 0;
    }

    .article {
        color: var(--text-color, #eee);
        background: var(--text-background, #fff);
    }

    :root {
        --text-color: #000;
        --text-background: #fff;
    }

    :root .dark {
        --text-color: #fff;
        --text-background: #000;
    } */

    @media (prefers-color-scheme: light) {
        .article {
            background: #fff;
            color: #000;
        }
    }

    @media (prefers-color-scheme: dark) {
        .article {
            background: #000;
            color: white;
        }
    }

    @media (prefers-color-scheme: no-preference) {
        .article {
            background: #fff;
            color: #000;
        }
    }
</style>
<body>
    <div class="article">
        asdadaaazkdjalk
        jalkjdlkajsdlkajdlkajdladjkajdladjaldjaslkdjalkljdajlaahz着黑色神测色按时来得快结案率；空当接龙卡到家了；昂昂；浪蝶狂蜂结案率；独守空房静安寺的；联发科静安上登录；看风景按时了；的看风景按时了；的咖啡机阿斯顿发了；卡说服力；卡萨丁房间爱上饭卡里发生的理发卡市解放路；卡视角的弗兰克；按实际弗兰克；按时发大水发静安寺；冷风机阿拉山口法司法局阿拉山口；地方就爱上了立法上登录；放假啦；束带结发；鞍山师范抗裂砂浆飞拉萨的；接发啥了；的附近按时了；打飞机爱是开发商；发酵的弗兰克；萨达爱福家奥德赛发生率法萨芬萨德里克开发撒娇；
        heasdla
    </div>
    <span id="span"></span>
</body>
<script>
    // const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
    // document.getElementById('span').innerHTML = darkMode.matches
    // if (darkMode && darkMode.matches) {
    //     document.body.classList.add('dark')
    // }
    // darkMode && darkMode.addListener(function(e) {
    //     if (e.matches) {
    //         document.body.classList.add('dark')
    //     } else {
    //         document.body.classList.remove('dark')
    //     }
    // });
</script>

</html>

CSS+媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .article {
        color: var(--text-color, #eee);
        background: var(--text-background, #fff);
    }

    :root {
        --text-color: #000;
        --text-background: #fff;
    }

    :root .dark {
        --text-color: #fff;
        --text-background: #000;
    }

    /* @media (prefers-color-scheme: light) {
        .article {
            background: #fff;
            color: #000;
        }
    }

    @media (prefers-color-scheme: dark) {
        .article {
            background: #000;
            color: white;
        }
    }

    @media (prefers-color-scheme: no-preference) {
        .article {
            background: #fff;
            color: #000;
        }
    } */
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<body>
    <div class="article">
        asdadaaazkdjalk
        jalkjdlkajsdlkajdlkajdladjkajdladjaldjaslkdjalkljdajlaahz着黑色神测色按时来得快结案率；空当接龙卡到家了；昂昂；浪蝶狂蜂结案率；独守空房静安寺的；联发科静安上登录；看风景按时了；的看风景按时了；的咖啡机阿斯顿发了；卡说服力；卡萨丁房间爱上饭卡里发生的理发卡市解放路；卡视角的弗兰克；按实际弗兰克；按时发大水发静安寺；冷风机阿拉山口法司法局阿拉山口；地方就爱上了立法上登录；放假啦；束带结发；鞍山师范抗裂砂浆飞拉萨的；接发啥了；的附近按时了；打飞机爱是开发商；发酵的弗兰克；萨达爱福家奥德赛发生率法萨芬萨德里克开发撒娇；
        heasdla
    </div>
    <span id="span"></span>
</body>
<script>
    const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
    document.getElementById('span').innerHTML = darkMode.matches
    if (darkMode && darkMode.matches) {
        document.body.classList.add('dark')
    }
    darkMode && darkMode.addListener(function(e) {
        if (e.matches) {
            document.body.classList.add('dark')
        } else {
            document.body.classList.remove('dark')
        }
    });
</script>

</html>