17JavaScript实现网页开关灯效果

作者: 个人不完美 | 来源:发表于2019-06-23 19:23 被阅读0次

网页开关灯效果实现

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>网页开关</title>
        <style type="text/css">
            .cls {
                background-color: cornflowerblue;
            }
        </style>
    </head>
    <body>

        <input type="button" id="btn" value="网页开关" />
        <script type="text/javascript">
            function $(id) {
                //封装id选择器的获取
                return typeof id === 'string' ? document.getElementById(id) : id;
            }
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                document.body.className = document.body.className != "cls" ? "cls" : "";
            }
        </script>
    </body>
</html>

预览效果

image.png