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

腾讯云服务器秒杀/优化网络培训

news 文章来源：https://blog.csdn.net/qq_21484461/article/details/133849335 2025/3/10 11:10:26
腾讯云服务器秒杀,优化网络培训,直销网站建设,手机制作图片软件JavaScript是一门强大的编程语言，它可以用来创建各种交互式网页应用。在这篇博客中，我们将通过一个简单的电灯开关案例来深入了解JavaScript的基础概念，包括HTML、CSS和JavaScript的结合使用。我们将从头开始构建这个案例，逐步引入…

在这里插入图片描述

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

怎么团队合作，协作开发

一、代码托管平台 我是在大一下的一个竞赛中接触到的代码托管平台 那个时候我也算是什么都不会的&#xff0c;不过不得不说这个确实比较重要&#xff0c;对我造成了一些冲击 在我看来&#xff0c;代码托管平台的作用就是在一个中转站&#xff08;仓库&#xff09;上存储我们写…...

编程日记 2023/10/16 1:59:35

python 练习--更新

1.判断一个列表中的数值是否全部小于某个数 方法一&#xff1a;利用if函数 &#xff08;只要列表中有一个数字比大 就可以终止比较&#xff09; n int(input("请输入需要比较的数字:")) arr1 [1,3,4,5,8] index 0 for i in arr1:if i > n:index 1continue…...

编程日记 2023/10/16 1:57:32

【Java 进阶篇】JavaScript 事件详解

在本篇博客中&#xff0c;我们将深入探讨JavaScript事件&#xff0c;这是网页交互的核心。我们将从什么是事件开始&#xff0c;然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终&#xff0c;我们将提供大量的示例代码来帮助您更好地…...

编程日记 2023/10/16 1:56:31

动态内存管理+柔性数组+经典笔试题

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…...

编程日记 2023/10/16 1:53:28

SQL和Python，哪个更容易自学？哪个更适合数据工作的编程新手？

如果你想从事数据工作&#xff0c;比如数据分析、数据开发、数据科学等&#xff0c;你可能会遇到这样的问题&#xff1a;SQL和Python哪个更容易自学&#xff1f;哪个更有用&#xff1f;哪个更有前途&#xff1f;其实这两种语言都是数据工作的重要技能&#xff0c;但它们的特点和…...

编程日记 2023/10/16 1:52:27

修改CDB的max_string_size，从STANDARD到EXTENDED

操作过程参考19c官方文档。 具体过程如下。先修改参数并重启&#xff1a; -- 修改参数 -- 注意&#xff1a;即使在 MAX_STRING_SIZE 设置为 EXTENDED 之后&#xff0c;根仍继续使用 STANDARD 语义。 -- 在根中将 MAX_STRING_SIZE 设置为 EXTENDED 的原因是&#xff0c;CDB 中…...

编程日记 2023/10/16 1:51:26

Python 字典

目录 1 字典介绍2 字典的创建3 字典元素的访问4 字典元素添加、修改、删除5 序列解包6 表格数据使用字典和列表存储&#xff0c;并实现访问7 字典核心底层原理(重要)7.1 将一个键值对放进字典的底层过程7.2 扩容7.3 根据键查找“键值对”的底层过程7.4 用法总结&#xff1a; 声…...

编程日记 2023/10/16 1:49:23

【nginx】nginx部署升级htpp+websocket访问

关注todo-step1和todo-step2就行了&#xff1a; user root; …… http {### Basic Settings##sendfile on;tcp_nopush on;types_hash_max_size 2048;client_max_body_size 10240m;include /etc/nginx/mime.types;default_type application/octet-stream;# 配置websocket访问 *…...

编程日记 2023/10/16 1:48:21

C# 生成JWT的Token

using JWT.Algorithms; using JWT; using JWT.Serializers;private string GetToken(string timeStamp, string deptName, string doctorName, string idNo){string token string.Empty;string appID config.AppID;string secretKey config.AppSecret;//十分钟有效期long ex…...

编程日记 2023/10/16 1:46:20

C# AnimeGAN 漫画风格迁移 动漫风格迁移 图像卡通化 图像动漫化

效果 项目 模型 animeganv3_H40_model.onnx animeganv3_H50_model.onnx animeganv3_H64_model.onnx AnimeGANv3_JP_face_v1.0.onnx AnimeGANv3_PortraitSketch_25.onnx Hayao-60.onnx Hayao_64.onnx Paprika_54.onnx Shinkai_53.onnx 下载 可执行文件exe下载 源码下载...

编程日记 2023/10/16 1:45:17