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

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

news 2026/2/9 6:31:57

在这里插入图片描述

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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/2/9 4:25:05

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/11/20 18:21:59