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

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

news 2025/7/6 18:34:26

在这里插入图片描述

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/7/5 9:34:55

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/6/17 9:25:03

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/7/5 16:11:28

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/5 15:41:32

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/7/6 0:57:39

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/7/6 13:32:37

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/7/5 3:24:45