js _页面开关灯效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>开关灯效果</title>
        <style type="text/css">
            html,body{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        </style>
    </head>
    <body id="oBody" style="background: white;">
        请点击网页变颜色
        <script type="text/javascript">
            //首先获取body
            //  document.getElementById("oBody");//在整个文档中,通过元素的ID获取一个元素
            //让body有一个可以点击的功能
            var oBody=document.getElementById("oBody");
//点击的时候我们要处理的事情
            oBody.onclick=function () {
      //点击的时候执行我们换颜色操作
                var bg=oBody.style.backgroundColor;
                if(bg==="white"){
                    oBody.style.backgroundColor="black";
                }
                if(bg==="black"){
                    oBody.style.backgroundColor="red";
                }
                if(bg==="red"){
                    oBody.style.backgroundColor="yellow";
                }
                if(bg==="yellow"){
                    oBody.style.backgroundColor="black";
                }
                
            }
            
            
            
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容