用javascript做一个简单易懂的开关

用javascript做一个开关

		let on = true;		//定义一个开关变量
        box.onclick = () =>{				//点击事件
            if(on){			//做判断 
                box.style.background = "blue"
                console.log("true")
            }else{
                box.style.background = "skyblue"
                console.log("false")
            }

            on = !on    //重点     非自身
        }

这是第一次点击的时候 true

在这里插入图片描述

这是第二次点击的时候 false

在这里插入图片描述

总结

  • 重点是 on = !on 用!来取反 一直 ture false 赋值给自身 就可以做到开关的效果了
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,以下是用 JavaScript一个侧边栏事件的示例代码: HTML 代码: ``` <div class="sidebar"> <button class="sidebar-toggle">侧边栏开关</button> <ul class="sidebar-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> </ul> </div> ``` JavaScript 代码: ``` const sidebarToggle = document.querySelector('.sidebar-toggle'); const sidebarMenu = document.querySelector('.sidebar-menu'); sidebarToggle.addEventListener('click', function() { sidebarMenu.classList.toggle('active'); }); ``` 这段代码会给“侧边栏开关”按钮添加一个点击事件,当按钮被点击时,它会切换侧边栏菜单的显示/隐藏状态。具体来说,它会在侧边栏菜单的 class 属性中切换一个名为“active”的类,这个类可以用 CSS 样式来控制侧边栏的显示和隐藏。 ### 回答2: 下面是一个使用JavaScript编写的简单侧边栏事件的示例: 首先,HTML页面结构需要包含一个具有侧边栏的容器元素和一个按钮元素,用于打开和关闭侧边栏。容器元素将包含您打算在侧边栏中显示的内容。 HTML代码如下: ```html <div id="sidebar"> <button id="sidebarToggle">侧边栏</button> <ul> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> </ul> </div> ``` 接下来,我们可以使用JavaScript来实现侧边栏的事件。 ```javascript // 获取侧边栏容器和按钮的引用 var sidebar = document.getElementById('sidebar'); var sidebarToggle = document.getElementById('sidebarToggle'); // 定义一个函数,用于切换侧边栏的显示状态 function toggleSidebar() { if (sidebar.classList.contains('show')) { sidebar.classList.remove('show'); } else { sidebar.classList.add('show'); } } // 将toggleSidebar函数与按钮的点击事件绑定 sidebarToggle.addEventListener('click', toggleSidebar); ``` 上述代码中,toggleSidebar函数检查侧边栏容器是否已经具有"show"类。如果已有,则移除它,如果没有,则添加它。通过添加或移除这个类,我们可以通过CSS样式来控制侧边栏的显示和隐藏。 最后,通过将toggleSidebar函数与按钮的点击事件绑定起来,当按钮被点击时,侧边栏的显示状态将会切换。 这是一个简单的侧边栏事件示例,您可以根据自己的需求对其进行扩展和修改。 ### 回答3: 要使用JavaScript编写一个侧边栏事件,我们可以执行以下步骤: 步骤1:HTML结构 首先,我们需要在HTML中创建一个包含侧边栏的基本结构。我们可以使用<ul>标签来创建侧边栏内容,每个侧边栏项使用<li>标签包装。 步骤2:CSS样式 为了使侧边栏更具吸引力,我们可以使用CSS样式来装饰。可以为侧边栏和其中的元素添加背景颜色、边框、宽度、高度等样式。 步骤3:JavaScript事件 接下来,我们将在JavaScript中编写侧边栏事件。我们可以使用addEventListener方法来为侧边栏的每个项添加事件监听器。根据需求,可以选择单击、双击或其他事件。 在事件处理程序函数中,我们可以执行所需的操作,比如切换侧边栏项的样式、显示/隐藏侧边栏内容等。 步骤4:将事件应用到元素 最后,我们需要将事件应用到相应的HTML元素上。使用document.getElementById()方法获取侧边栏项的引用,并为其添加事件监听器。 这样,当用户与侧边栏交互时,相应的事件处理程序将执行,并执行预定义的操作。 请注意,以上只是一个基本的步骤和指导,通过进一步修改和应用其他JavaScript特性,可以实现更复杂和交互性更强的侧边栏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值