20网页开关灯

最新推荐文章于 2022-05-21 17:06:05 发布

dinggu6579

最新推荐文章于 2022-05-21 17:06:05 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangDY/p/11424203.html

本文介绍了一种使用HTML、CSS和JavaScript实现的网页灯光开关效果。通过改变body类名，可以实现页面背景颜色的切换，模拟开/关灯的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .cls {
                background-color: black;
            }
        </style>
    </head>
    <body class="cls">
        <input type="button" value="开/关灯" id="btn">
        <script type="text/javascript">
            function my$(id) {
                return document.getElementById(id);
            }
            my$("btn").onclick=function(){
                //获取body标签
                document.body.className=document.body.className!="cls"?"cls":"";
            }
        </script>
    </body>
</html>