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

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55: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写了一个

 

附上全部代码


<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
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中用一个button按钮实现开关灯效果
fightingfjj的博客
11-15 5242
JS中用一个button按钮实现开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
JS小练习---开关灯泡
gabby____的博客
08-10 1424
&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...
页面开灯关灯效果的实现
05-04
页面开灯关灯效果的实现（一个按钮两种状态，主要是利用修改背景颜色来实现）
轻松学习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 540
【代码】js开关灯。
前端小练习JS实现网页开灯和关灯
weixin_51983027的博客
11-30 1334
思路：首先是获取开关灯按钮元素和body元素，然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色，按钮的背景色变为白色，按钮由关灯字样变为开灯字样，然后再点击按钮，又由开灯变为关灯，页面背景色变为白色。基于javascript，css，html实现的一个简单好用的关灯开灯小案例
JS实现简单页面开灯关灯效果
weixin_46016425的博客
08-19 112
pink老师的第n弟子作业打卡！
实现一个开灯关灯特效实现一个开灯关灯特效
04-23
在IT行业中，实现一个开灯关灯特效通常指的是在...总的来说，实现开灯关灯特效涉及图形学、动画原理以及用户交互设计等多个方面。通过编程和创意，我们可以创建出各种独特的视觉体验，提升用户在数字世界中的沉浸感。
Jquery实现视频播放页面的关灯开灯效果
10-27
使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好，具体实现代码如下，感兴趣的朋友可以参考下
WiFi开灯_esp8266开灯e4a源码_
10-03
标题中的“WiFi开灯_esp8266开灯e4a源码”指的是一个使用ESP8266 Wi-Fi模块来控制灯光开关的项目，其中的“e4a源码”表明编程语言是Easy4App（E4A），这是一种针对嵌入式设备的简单编程工具，特别适用于Android应用...
jquery视频网站背景关灯开灯效果代码
11-02
在网页设计中，为了提供更好的用户体验，特别是在观看视频时，许多网站会采用“关灯”或“开灯”效果。这种效果允许用户在观看视频时将网页其他部分暗化，焦点集中在视频上，减少视觉干扰。`jQuery`库提供了一个简单...
点击开关灯效果html,js实现电灯开关效果
weixin_32043813的博客
06-09 2180
本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片属性2.绑定单击事件3.点击时切换图片1.通过按钮实现电灯开关Title 关function f1() {//开let bt1=document.getElementById("bt1");//获取按钮idlet im...
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
繁依Fanyi的博客
10-15 1382
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
js 实现一个开灯关灯操作
weixin_45932157的博客
04-23 476
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') var lamp=document.getElementById('lamp')
JS 开关灯实验
qq_45387575的博客
02-20 255
主要练习如何获取body元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0..
使用JavaScript做灯泡开关的效果
zyk262511的博客
10-13 367
使用JavaScript做灯泡开关的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>灯</title> <style> #a1{ float: left;...
开关灯效果HTML,js实现开关灯效果
weixin_39948824的博客
06-03 740
本文实例为大家分享了js实现开关灯效果的具体代码，供大家参考，具体内容如下开关灯body{background: black;cursor: pointer;}.lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}.pole{width: 10px;height: 400px;background: brown;...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 444
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
android service开灯关灯
05-28
好的，我可以为您提供一些关于如何使用Android Service开灯关灯的指导。 首先，您需要在AndroidManifest.xml文件中声明一个Service组件，以便在应用程序中使用。例如： ```xml <service android:name=".MyService" /> ``` 然后，您需要在MyService.java类中实现Service的逻辑。在这个类中，您可以使用Android的API来控制设备的灯光。 例如，您可以使用Camera类来打开和关闭设备的闪光灯。以下是一个示例代码： ```java public class MyService extends Service { private Camera camera; private boolean isFlashOn; @Override public int onStartCommand(Intent intent, int flags, int startId) { // 获取Camera实例 camera = Camera.open(); // 开启闪光灯 turnOnFlash(); return START_STICKY; } @Override public void onDestroy() { // 关闭闪光灯 turnOffFlash(); // 释放Camera资源 camera.release(); super.onDestroy(); } private void turnOnFlash() { if (!isFlashOn) { // 开启闪光灯 Camera.Parameters params = camera.getParameters(); params.setFlashMode(Camera.Parameters.FLASH_MODE_TORCH); camera.setParameters(params); camera.startPreview(); isFlashOn = true; } } private void turnOffFlash() { if (isFlashOn) { // 关闭闪光灯 Camera.Parameters params = camera.getParameters(); params.setFlashMode(Camera.Parameters.FLASH_MODE_OFF); camera.setParameters(params); camera.stopPreview(); isFlashOn = false; } } @Override public IBinder onBind(Intent intent) { return null; } } ``` 在这个示例中，我们在Service的onStartCommand()方法中开启了闪光灯，并在Service的onDestroy()方法中关闭了闪光灯。您可以根据您的需求来修改这个代码。 最后，您可以在您的Activity中启动您的Service，例如： ```java Intent intent = new Intent(this, MyService.class); startService(intent); ``` 这样，您就可以使用Service来控制设备的灯光了。希望这个例子能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值