简单的JavaScript实现开灯关灯效果 ↑_↑

最新推荐文章于 2024-09-09 15:56:10 发布
最新推荐文章于 2024-09-09 15:56:10 发布
阅读量9.2k 收藏 9
点赞数
分类专栏： html+css+div Javascript 文章标签： javascript button bt function css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrz_swworld/article/details/7538233
版权
这篇博客介绍了如何使用JavaScript简单实现网页上的开关灯效果，通过改变body的CSS类实现背景颜色切换。当类名为'daytime'时，点击按钮会切换到'night'类，背景变暗；反之，背景变亮。此外，还展示了如何扩展功能，结合CSS和JavaScript来控制其他层的显示和隐藏。
摘要由CSDN通过智能技术生成

近期做网页设计作业，感觉各种视频网站上的关灯效果很人性化，所以简易的用JavaScript写了一个

 

附上全部代码


<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>无标题文档</title>

<style type="text/css">
#choose{
 margin:200px 200px;
}
.daytime{
 background: #0D0D0D;
}
.nigth{
 background: #FFF;
}
</style>

<script language="javascript" type="text/javascript">
          function Switch()

         {
              var button = document.getElementById("bt");  //通过id获得button
              var type = document.body.className;           //获得html里body的CSS样式表


              if (type == "daytime")    //判断类的名称，如果类是"daytime"则点击button后

最低0.47元/天 解锁文章
NCITS
关注
专栏目录
JS小练习---开关灯泡
gabby____的博客
08-10 1475
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script&gt; function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/i/eg_bulb...
CSS实现开灯关灯的效果
fantasyfzg的博客
11-10 803
纯CSS实现开灯关灯特效
页面开灯关灯效果的实现
05-04
页面开灯关灯效果的实现（一个按钮两种状态，主要是利用修改背景颜色来实现）
HTML+CSS 自由控制灯光（一键复制）
最新发布
我们好像在哪见过 私
09-09 257
HTML+CSS 自由控制灯光（一键复制）
使用javascript实现开灯关灯案例
liangruilz的博客
05-09 2582
使用javascript实现开灯关灯案例
JavaScript - 超简单实现页面的“关灯”和“开灯”
weixin_54138158的博客
04-13 1798
文章目录前言一、实现效果二、代码示例 前言 题目描述：通过Javascript点击按钮实现页面背景颜色的改变 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现效果 二、代码示例 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit
JavaScript实现网页关灯效果
jakelihua
12-07 1889
简介：本文讲解的是，如何使用JavaScript实现我们经常看见的网页的关灯效果。
JavaScript开关灯具体操作
weixin_52583582的博客
12-16 275
原理：利用if语句，鼠标点击换图片，再点击在换图片。 具体图片代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </
实现一个开灯关灯特效实现一个开灯关灯特效
04-23
在IT行业中，实现一个开灯关灯特效通常指的是在...总的来说，实现开灯关灯特效涉及图形学、动画原理以及用户交互设计等多个方面。通过编程和创意，我们可以创建出各种独特的视觉体验，提升用户在数字世界中的沉浸感。
WiFi开灯_esp8266开灯e4a源码_
10-03
标题中的“WiFi开灯_esp8266开灯e4a源码”指的是一个使用ESP8266 Wi-Fi模块来控制灯光开关的项目，其中的“e4a源码”表明编程语言是Easy4App（E4A），这是一种针对嵌入式设备的简单编程工具，特别适用于Android应用...
通过js实现电灯开关案例
须臾的博客
12-11 1742
如何通过Js实现电灯开关的案例
轻松学习JavaScript四：JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
热门推荐
life is wonderful
11-18 1万+
我们开始解释JS在HTML中作用。对于因特网和视窗操作系统，JavaScript都意味着未来。        (1)JavaScript：写入HTML输出        实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
js开关灯
weixin_69491512的博客
05-15 584
【代码】js开关灯。
前端小练习JS实现网页开灯和关灯
weixin_51983027的博客
11-30 1425
思路：首先是获取开关灯按钮元素和body元素，然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色，按钮的背景色变为白色，按钮由关灯字样变为开灯字样，然后再点击按钮，又由开灯变为关灯，页面背景色变为白色。基于javascript，css，html实现的一个简单好用的关灯开灯小案例
JS中用一个button按钮实现开关灯效果
fightingfjj的博客
11-15 5293
JS中用一个button按钮实现开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
点击开关灯效果html,js实现电灯开关效果
weixin_32043813的博客
06-09 2285
本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片属性2.绑定单击事件3.点击时切换图片1.通过按钮实现电灯开关Title 关function f1() {//开let bt1=document.getElementById("bt1");//获取按钮idlet im...
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
繁依Fanyi的博客
10-15 1484
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
js 实现一个开灯关灯操作
weixin_45932157的博客
04-23 506
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') var lamp=document.getElementById('lamp')
开关灯效果HTML,js实现开关灯效果
weixin_39948824的博客
06-03 784
本文实例为大家分享了js实现开关灯效果的具体代码，供大家参考，具体内容如下开关灯body{background: black;cursor: pointer;}.lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}.pole{width: 10px;height: 400px;background: brown;...
智能语音控制实现开灯关灯与开门关门操作
资源摘要信息:"本文将详细介绍如何通过嵌入式开发板实现智能语音识别控制家居的基本操作，包括开灯关灯和开门关门。涉及到的关键技术点包括嵌入式系统的开发流程、语音识别模块的集成与应用、以及GPIO（通用输入输出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值