开关灯效果

最新推荐文章于 2024-09-14 22:18:26 发布

黎明不管黑夜的星空

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量174

点赞数 2

分类专栏： Javascript 前端 jQuery 文章标签：前端 javascript jquery 经验分享

本文链接：https://blog.csdn.net/weixin_50930483/article/details/141052836

版权

Javascript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

代码如下（为了方便不分开代码，代码里面使用的文件自行去下载使用）：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
			html,
            body {
				height:100%;
                text-align: center;
				padding: 100px 0 0 0;
            }
            .btn_open , /* 并集选择器*/
            .btn_close {
                width:120px;
                height: 40px;
                background-color: #ccc;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                position: fixed;
                top: 100px;
                right: 50px;
            }
            .btn_close {
                top: 150px;
            }
			[class^="btn"].active {
			   background-color: #f50;
			}
    </style>
</head>
<body>
    <img src="./psc.png" alt="">

    <div class="btn_open active"> 开灯 </div>
    <div class="btn_close "> 关灯</div>

    <script src="./jquery.min.js"></script>
    <script>
            // 入口函数
            $(function(){
                   // 要求：
				   // 点击“开灯”，设置页面背景为白色
				   // 点击“关灯”，设置页面背景为黑色


                    // 思考：
                        // jquery对象如何绑定事件?
                        // 如果不知道jquery对象下有哪些已经封装好的方法
                        // jquery对象转成dom对象，才能使用dom.onclick = function(){}

                    // 编码：
                    // 步骤：1、获取页面相关的元素 2、事件绑定 3、书写业务处理逻辑
                    // 1. 获取按钮 并绑定事件
                    $(".btn_open")[0].onclick = function(){
                        // 2. 执行开灯的逻辑
                        $(this).addClass("active").siblings().removeClass("active");
                        // 设置页面的背景色
                        $("body").css("backgroundColor","#fff");
                    }

                    $(".btn_close")[0].onclick = function(){
                        // 2. 执行关灯的逻辑
                        // 给当前点击的标签添加类名,移除非当前点击的兄弟元素的类名
                        $(this).addClass("active").siblings().removeClass("active");
                        // 设置页面的背景色
                        $("body").css("backgroundColor","#000");

                    }


                    // 总结:
                        // jquery $函数的使用
                        // 获取页面的元素,jquery对象转dom对象
                        // 事件绑定
                        // 事件函数作用域的this,this是指针变量,指向事件的调用者
                        // dom对象转成jquery对象
                        // 基本jquery的api

            })
    </script>
</body>
</html>

效果图如下：

PS：默认开灯效果，可以自行更改。

开灯效果：