当前位置： 首页 > news >正文

【Java 进阶篇】JavaScript电灯开关案例：从原理到实现

news 2025/7/7 9:51:23

在这里插入图片描述

JavaScript是一门强大的编程语言，它可以用来创建各种交互式网页应用。在这篇博客中，我们将通过一个简单的电灯开关案例来深入了解JavaScript的基础概念，包括HTML、CSS和JavaScript的结合使用。我们将从头开始构建这个案例，逐步引入相关概念，以帮助初学者更好地理解JavaScript的工作原理。

1. 介绍

在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。这个案例将帮助您理解以下关键概念：

  • HTML结构：创建HTML元素，包括按钮和灯。
  • CSS样式：定义按钮、灯和页面的样式。
  • JavaScript交互：通过JavaScript来实现按钮与灯的交互。

2. 准备工作

在开始之前，我们需要准备一些基本的工作，包括创建HTML文件、CSS文件和JavaScript文件。您可以使用任何文本编辑器，比如VS Code、Sublime Text等，创建这些文件。

2.1 创建HTML文件

首先，创建一个HTML文件，可以命名为index.html，并使用以下内容填充：

<!DOCTYPE html>
<html>
<head><title>电灯开关案例</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><h1>电灯开关案例</h1><div class="light" id="light"></div><button id="toggleButton">切换开关</button><script src="script.js"></script>
</body>
</html>

这个HTML文件定义了网页的结构，包括一个标题、一个light的<div>元素作为电灯，一个toggleButton的按钮，以及引入了外部的CSS和JavaScript文件。

2.2 创建CSS文件

接下来，创建一个CSS文件，可以命名为styles.css，并使用以下内容填充：

body {font-family: Arial, sans-serif;text-align: center;
}.light {width: 100px;height: 100px;background-color: gray;margin: 20px auto;border-radius: 50%;transition: background-color 0.3s;
}#toggleButton {background-color: #3498db;color: #fff;border: none;padding: 10px 20px;cursor: pointer;
}#toggleButton:hover {background-color: #2980b9;
}

这个CSS文件定义了页面的样式，包括页面字体、按钮和灯的样式。注意，我们使用了transition属性来实现电灯背景颜色切换时的平滑过渡效果。

2.3 创建JavaScript文件

最后，创建一个JavaScript文件，可以命名为script.js，用于实现电灯开关的交互。以下是JavaScript文件的内容：

// 获取按钮和灯的元素
const toggleButton = document.getElementById('toggleButton');
const light = document.getElementById('light');// 初始电灯状态为关闭
let isLightOn = false;// 按钮点击事件处理程序
toggleButton.addEventListener('click', function() {if (isLightOn) {// 关闭电灯light.style.backgroundColor = 'gray';isLightOn = false;} else {// 打开电灯light.style.backgroundColor = 'yellow';isLightOn = true;}
});

这段JavaScript代码首先获取了按钮和电灯的DOM元素，然后定义了一个变量isLightOn，用于跟踪电灯的状态。随后，我们为按钮添加了一个点击事件处理程序，当按钮被点击时，它会检查isLightOn的状态。如果isLightOn为true，表示电灯已经亮起，那么点击按钮后会将电灯关闭，背景颜色变为灰色；如果isLightOn为false，表示电灯已经关闭，那么点击按钮后会将电灯打开，背景颜色变为黄色。同时，我们使用了style.backgroundColor属性来更改电灯的背景颜色。

3. 运行电灯开关案例

现在，我们已经完成了HTML、CSS和JavaScript的准备工作。您可以在浏览器中打开index.html文件来查看电灯开关案例的效果。当您点击"切换开关"按钮时，电灯的状态将会切换，背景颜色也会相应地改变。

这个案例涵盖了HTML元素的创建，CSS样式的定义以及JavaScript的交互，是一个入门级别的示例，有助于初学者更好地理解这些基础概念。

4. 总结

在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。这个案例涵盖了HTML元素的创建、CSS样式的定义以及JavaScript的交互，有助于初学者更好地理解这些基础概念。

希望这个案例对您学习前端开发有所帮助，同时也为您提供了一个入门级别的项目来练习和掌握这些技能。如果您想要深入学习前端开发，还有很多更复杂和有趣的项目等待着您，继续努力学习吧！

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

相关文章：

【Java 进阶篇】JavaScript电灯开关案例：从原理到实现

JavaScript是一门强大的编程语言&#xff0c;它可以用来创建各种交互式网页应用。在这篇博客中&#xff0c;我们将通过一个简单的电灯开关案例来深入了解JavaScript的基础概念&#xff0c;包括HTML、CSS和JavaScript的结合使用。我们将从头开始构建这个案例&#xff0c;逐步引入…...

编程日记 2023/10/16 2:24:02

并发、并行、同步、异步、阻塞、非阻塞

一、多核、多cpu &#xff08;一&#xff09;多核 Multicore 核是CPU最重要的部分。负责运算。核包括控制单元、运算单元、寄存器等单元。 多核就是指单个CPU中有多个核。 &#xff08;二&#xff09;多cpu Multiprocessor 多cpu就是一个系统拥有多个CPU。每个CPU可能有单个核…...

编程日记 2023/10/16 2:23:01

C语言：冒泡排序

C语言 基础开发----目录 冒泡排序 1. 原理 对一个有n个数据的数组进行遍历&#xff0c;依次对相邻两个数据进行比较大小&#xff0c;若大的数据在前面则交换位置&#xff08;升序&#xff09;&#xff0c;完成一次遍历后数组中最大的数据到了数组的末尾位置&#xff0c;就象水…...

编程日记 2023/10/16 2:22:00

Android 内容提供者和内容观察者：数据共享和实时更新的完美组合

任务要求 一个作为ContentProvider提供联系人数据另一个作为Observer监听联系人数据的变化&#xff1a; 1、创建ContactProvider项目&#xff1b; 2、在ContactProvider项目中用Sqlite数据库实现联系人的读写功能&#xff1b; 3、在ContactProvider项目中通过ContentProvid…...

编程日记 2023/10/16 2:20:59

六、K8S之StatefulSet

StatefulSet 一、概念 和Deployment一样StatefulSet也是中一种可以帮助我们部署和扩展Pod的控制器&#xff0c;使用Deployment时多数时候不需要在意Pod的调度方式。如果需要关心Pod的部署顺序、对应持久化存储或者要求Pod拥有固定的网络标识时&#xff0c;就需要StatefulSet控…...

编程日记 2023/10/16 2:18:56

基于微服务+Java+Spring Cloud开发的建筑工地智慧平台源码 云平台多端项目源码

建筑工地智慧平台源码&#xff0c;施工管理端、项目监管端、数据大屏端、移动APP端全套源码 技术架构&#xff1a;微服务JavaSpring Cloud VueUniApp MySql自主版权实际应用案例演示 建筑工地智慧平台已应用于线上巡查、质量管理、实名制管理、危大工程管理、运渣车管理、绿色…...

编程日记 2023/10/16 2:17:54

微信小程序异常：navigateTo:fail can not navigateTo a tabbar page

场景还原 微信小程序利用路径wx.navigateTo跳转界面时发送异常 跳转代码 showDetail(e){// 获取图片绑定的ID编号let id e.currentTarget.dataset.id;// 指定编号查询 携带参数到详情界面 wx.navigateTo({url: /pages/details/details?id id,})}异常代码 WAServiceMain…...

编程日记 2023/10/16 2:16:53

智慧公厕高精尖技术揭秘，让卫生管理更智能、更舒适

随着科技的飞速发展&#xff0c;智慧公厕正逐渐走进人们的生活。借助物联网、互联网、云计算、大数据、人工智能、自动化控制等技术的应用&#xff0c;智慧公厕将卫生管理提升到一个全新的水平&#xff0c;为公众打造了清洁舒适的使用环境。本文以智慧公厕源头厂家广州中期科技…...

编程日记 2023/10/16 2:14:51

Spring Cloud的革新：服务网格和云原生整合

文章目录 介绍Spring Cloud服务网格的兴起Spring Cloud与Service Mesh的整合1. 服务发现2. 负载均衡3. 故障处理4. 安全性 云原生整合结论 &#x1f389;欢迎来到架构设计专栏~Spring Cloud的革新&#xff1a;服务网格和云原生整合 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f37…...

编程日记 2023/10/16 2:13:50

EfficientDet: Scalable and Efficient Object Detection

CVPR2020 V7 Mon, 27 Jul 2020 引用量&#xff1a;243 机构&#xff1a;Google 贡献&#xff1a;1>提出了多尺度融合网络BiFPN 2>对backbone、feature network、box/class prediction network and resolution进行复合放缩&#xff0c;有着不同的…...

编程日记 2023/10/16 2:11:48

【数据结构】二叉树链式存储及遍历

二叉树链式存储及遍历 文章目录 二叉树链式存储及遍历前言实现过程代码实现源代码总结 前言 本文章中的内容参考于王道数据结构考研书&#xff0c;如果你对该部分的内容的记忆有所模糊&#xff0c;可以阅读我的文章再加深印象 实现过程 1.定义二叉树结构体 2.初始化二叉树的根结…...

编程日记 2023/10/16 2:10:47

数字孪生技术：新零售的未来之路

随着科技的不断进步&#xff0c;新零售产业正经历着巨大的变革。数字孪生作为一种新兴技术正在加速这一变革的进程。它不仅为新零售企业带来了更高效的运营方式&#xff0c;还为消费者提供了更个性化、便捷的购物体验。那么&#xff0c;数字孪生技术究竟如何在新零售产业中发挥…...

编程日记 2023/10/16 2:09:46

NIO教程

一&#xff0c;概述 原本的java是基于同步阻塞式的i/o通信&#xff08;bio) 性能低下&#xff0c;所以出现了nio这种非阻塞式的 二&#xff0c;Java 的I/O演进之路 2.1 i/o模型基本说明 i/o模型&#xff1a;就是用什么样的通道或者说通信模式和架构进行数据的传输和接收&am…...

编程日记 2023/10/16 2:07:45

【MySQL】表的内连和外连

文章目录 一. 内连接二. 外连接1. 左外连接2. 右外连接 一. 内连接 利用where子句对两种表形成的笛卡尔积进行筛选&#xff0c;其实就是内连接的一种方式 另一种方式是inner join select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件现在有如下表 mysql> desc…...

编程日记 2023/10/16 2:06:43

文心一言：文心大模型 4.0 即将发布

本心、输入输出、结果 文章目录 文心一言：文心大模型 4.0 即将发布前言文心 4.0 的成本问题架构文心 4.0 是否可以对标 GPT-4文心4.0 会不会收费弘扬爱国精神文心一言：文心大模型 4.0 即将发布 编辑：简简单单 Online zuozuo 地址：https://blog.csdn.net/qq_15071263 前言 …...

编程日记 2023/10/16 2:05:42

HTML笔记

注释标签&#xff1a;<!-- --> 标题标签&#xff1a;&#xff08;作用范围依次递减&#xff09; <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 段落标签&#xff1a;<p&g…...

编程日记 2023/10/16 2:04:41

design compiler中的drc规则详解

design compiler中的drc规则详解 DRC是什么&#xff1f;DRC分类各个DRC的含义写在最后 DRC是什么&#xff1f; 本文讨论的DRC即是Design Rule Constraint,而不是Design Rule Check&#xff0c;后者是物理端或者后端的一个关键步骤。 DRC分类 DRC为DC中的一个约束大类&#x…...

编程日记 2023/10/16 2:03:40

CEC2013（MATLAB）：螳螂搜索算法（Mantis Search Algorithm，MSA）求解CEC2013

一、螳螂搜索算法 螳螂搜索算法&#xff08;Mantis Search Algorithm&#xff0c;MSA&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模拟螳螂独特的狩猎和性同类相食行为。MSA由三个优化阶段组成&#xff0c;包括寻找猎物&#xff08;探索&#xff09…...

编程日记 2023/10/16 2:02:38

【错误：No package snapd available.】在 CentOS 上启用 snap 并安装 snapd

参考&#xff1a;Install snapd on CentOS using the Snap Store | Snapcraft sudo yum install epel-releasesudo yum install snapd...

编程日记 2023/10/16 2:01:37

Shell命令笔记2

大家好&#xff0c;分享下最近工作中用得比较多的shell命令&#xff0c;希望对大家有帮助。 获取数组长度&#xff1a; ${#array_name[*]}获取脚本相对路径 script_path$(dirname "$0")获取脚本的名字 script_name$(basename "$0")获取脚本的绝对路径 …...

编程日记 2023/10/16 2:00:36

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/4 15:27:39

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/7/5 16:03:34

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/6/17 6:27:36

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/6/19 5:54:07

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/6 5:46:14

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/7/6 11:54:40

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/7/6 19:09:54

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/7/4 15:34:29