自定义颜色主题

时间：2023-5-27 23:39 作者：小诸葛 分类： 前端 正在检查是否收录...

可以用来自定义主题的颜色的修改，

代码如下：


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ha {
            background-color: #666;
        }
    </style>
</head>

<body>
    <h1 class="ha">自定义颜色</h1>
    <input type="color">

</body>
<script>

    const inputNode = document.querySelector("input");
    const btnNode = document.querySelector("button");
    const h1Node = document.querySelector("h1");

    add()

    let arr1 = "";

    inputNode.addEventListener("click", function () {
        function colorRGB2Hex(color) {
            var rgb = color.split(',');
            var r = parseInt(rgb[0].split('(')[1]);
            var g = parseInt(rgb[1]);
            var b = parseInt(rgb[2].split(')')[0]);
            var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
            return hex;
        }

        window.setInterval(function () {
            h1Node.style.backgroundColor = inputNode.value;
            arr1 = h1Node.style.backgroundColor
            localStorage.setItem("color", colorRGB2Hex(arr1));
            console.log(colorRGB2Hex(arr1));
        }, 1000)
    })

    arr1 = JSON.stringify(arr1);
    function add() {
        inputNode.value = localStorage.getItem("color")
        console.log("此时颜色", inputNode.value);
        h1Node.style.backgroundColor = inputNode.value
    }

</script>

</html>

自定义颜色

版权说明

扫描二维码，在手机上阅读