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

HTML5 开关（Toggle Switch）详细讲解

news 来源：原创 2025/7/18 20:36:50

HTML5 开关（Toggle Switch）详细讲解

在这里插入图片描述

1. 任务概述

开关（Toggle Switch）是一种用于表示二元状态（如开/关）的用户界面控件。用户可以通过点击开关来切换状态，常见于设置选项、开关功能等场景。

2. 代码结构

以下是实现开关控件的完整代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开关控件示例</title><style>/* CSS样式在此 */</style>
</head>
<body><h2>开关（Toggle Switch）示例</h2><label class="toggle-switch"><input type="checkbox" id="toggle"><span class="slider"></span>
</label><script>// JavaScript事件在此
</script></body>
</html>

3. HTML部分

<label class="toggle-switch"><input type="checkbox" id="toggle"><span class="slider"></span>
</label>

<label>: 包裹开关控件的标签。点击标签时会触发开关状态的切换。
<input type="checkbox">: 这是实际的开关控件，类型为复选框（checkbox）。它的状态（checked或unchecked）表示开关的状态。
<span class="slider">: 用于展示开关的外观，通过CSS样式来控制其样式和动画效果。

4. CSS样式

<style>.toggle-switch {position: relative;display: inline-block;width: 60px; /* 开关宽度 */height: 34px; /* 开关高度 */}.toggle-switch input {opacity: 0; /* 隐藏原生复选框 */width: 0; height: 0; }.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc; /* 默认背景色 */transition: .4s; /* 动画效果 */border-radius: 34px; /* 圆角 */}.slider:before {position: absolute;content: "";height: 26px; /* 滑块高度 */width: 26px; /* 滑块宽度 */left: 4px; /* 滑块左侧位置 */bottom: 4px; /* 滑块底部位置 */background-color: white; /* 滑块颜色 */transition: .4s; /* 动画效果 */border-radius: 50%; /* 滑块圆形 */}input:checked + .slider {background-color: #2196F3; /* 开启状态的背景色 */}input:checked + .slider:before {transform: translateX(26px); /* 开启状态滑块移动 */}
</style>

.toggle-switch: 设置开关的整体布局，宽度和高度。
input: 隐藏原生复选框，使其不可见，但仍能响应点击事件。
.slider: 定义开关的外观，包括背景色、圆角和动画效果。
.slider:before: 定义滑块的样式和位置。
input:checked + .slider: 当复选框被选中时，改变背景色。
input:checked + .slider:before: 当复选框被选中时，滑块向右移动。

5. JavaScript部分

<script>const toggle = document.getElementById('toggle');toggle.addEventListener('change', function() {if (this.checked) {console.log('开关已打开'); // 开启状态} else {console.log('开关已关闭'); // 关闭状态}});
</script>

获取元素: 使用document.getElementById获取到复选框元素。
事件监听: 监听复选框的change事件，当状态改变时执行回调函数。
状态判断: 通过this.checked判断当前状态，并在控制台输出相应的信息。

6. 整体效果

用户在网页上可以看到一个开关控件。点击开关时，背景色和滑块位置会发生变化，表示状态的切换。
控制台会输出当前的开关状态（打开或关闭）。

总结

通过以上代码和讲解，你可以实现一个简单而美观的开关（Toggle Switch）控件。这个控件不仅可以用于网页上的设置选项，还可以根据需要进行扩展和美化。

HTML5 开关（Toggle Switch）详细讲解

HTML5 开关（Toggle Switch）详细讲解 1. 任务概述开关（Toggle Switch）是一种用于表示二元状态（如开/关）的用户界面控件。用户可以通过点击开关来切换状态，常见于设置选项、开关功能等场景。 2…...

编程日记 2025/7/18 20:36:50

【前端】Node.js使用教程

目录一、?Node.js开发环境和编译 1.1 安装Node.js 1.2 创建一个Node.js项目 1.3 编写Node.js程序 1.4 运行Node.js程序 1.5 使用Node.js模块二、高级的Node.js编程概念和示例 2.1 异步编程 2.2 错误处理 2.3 网络请求 2.4 构建Web服务器 2.5 数据库交互三、No…...

编程日记 2025/7/18 20:08:19

在CodeBlocks搭建SDL2工程构建TFT彩屏模拟器虚拟TFT彩屏幕显示

在CodeBlocks搭建SDL2工程构建TFT彩屏模拟器虚拟TFT彩屏幕显示参考文章源码下载地址一、SDL2的创建、初始化、退出二、系统基本Tick、彩屏刷新、按键事件三、彩屏获取与设置颜色四、彩屏填充颜色及清屏五、彩屏显示中文和英文字符串六、彩屏显示数字七、彩屏初始化八、主函数测…...

编程日记 2025/7/18 11:17:04

BurstAttention：高效的分布式注意力计算框架

BurstAttention：高效的分布式注意力计算框架在现代大型语言模型（LLMs）的应用中，提升注意力机制的计算效率已成为研究的热点。当前，提升计算效率主要有两种方法：一种是优化单设备的计算和存储能力&#xf…...

编程日记 2025/7/18 20:04:42

sentinel集成nacos启动报[check-update] get changed dataId error, code: 403错误排查及解决

整合nacos报403错误因为平台写的一个限流代码逻辑有问题，所以准备使用sentinel来限流。平台依赖里面已经引入了，之前也测试过，把sentinel关于nacos的配置加上后，启动一直输出403错误 [fixed-10.0.20.188_8848-test] [check-upda…...

编程日记 2025/7/18 20:20:37

[TOTP]android kotlin实现 totp身份验证器类似Google身份验证器

背景：自己或者公司用一些谷歌身份验证器或者microsoft身份验证器，下载来源不明，或者有广告，使用不安全。于是自己写一个，安全放心使用。代码已开源：shixiaotian/sxt-android-totp: android totp authenti…...

编程日记 2025/7/18 20:25:30

IDEA+Docker一键部署项目SpringBoot项目

文章目录 1. 部署项目的传统方式2. 前置工作3. SSH配置4. 连接Docker守护进程5. 创建简单的SpringBoot应用程序6. 编写Dockerfile文件7. 配置远程部署 7.1 创建配置7.2 绑定端口7.3 添加执行前要运行的任务 8. 部署项目9. 开放防火墙的 11020 端口10. 访问项目11. 可能遇到的问…...

编程日记 2025/7/18 20:21:32

【发票提取明细+发票号改名】批量提取PDF电子发票明细导出Excel表格并改名技术难点，批量PDF多区域内容识别提取明细并用内容改名的小结

1、图片版的发票提取表格改名【批量图片发票识别表格】批量图片发票的提取Excel表格和提取字段改名，扫描发票识别表格，拍照发票识别表格，图片发票识别改名我们在工作中很多扫描发票，拍照发票，需要整理成excel表格&am…...

编程日记 2025/7/18 1:31:15

pyQT + OpenCV相关练习

一、设计思路 1、思路分析与设计本段代码是一个使用 PyQt6 和 OpenCV 创建的图像处理应用程序。其主要功能是通过一个图形界面让用户对图片进行基本的图像处理操作，如灰度化、翻转、旋转、亮度与对比度调整，以及一些滤镜效果（模糊、锐化、边…...

编程日记 2025/7/18 19:48:53

石岩路边理发好去处

周末带娃去罗租公园玩，罗租公园旁边就是百佳华和如意豪庭小区，发现如意豪庭小区对面挺多路边理发摊点理发摊点聚焦在这里的原因是刚好前面城管来了暂时避避，例如还有一个阿姨剪到一半就跟着过来。这里的城管只是拍了一处没有摊位的地方&…...

编程日记 2025/7/18 10:00:22

音视频入门基础：MPEG2-PS专题（2）——使用FFmpeg命令生成ps文件

一、错误的命令通过FFmpeg命令可以将mp4文件转换为ps文件，PS文件中包含PS流数据。由于PS流/PS文件对应的FFInputFormat结构为： const FFInputFormat ff_mpegps_demuxer {.p.name "mpeg",.p.long_name NULL_IF_CONFIG_SMALL…...

编程日记 2025/7/18 20:06:02

整合版canal ha搭建--基于1.1.4版本

开启MySql Binlog（1）修改MySql配置文件（2）重启MySql服务,查看配置是否生效（3）配置起效果后，创建canal用户，并赋予权限安装canal-admin（1）解压 canal.admin-1…...

编程日记 2025/7/17 18:26:22

[python SQLAlchemy数据库操作入门]-15.联合查询，跨表获取股票数据

哈喽，大家好，我是木头左！在开始探讨如何利用SQLAlchemy实现复杂的联合查询之前，首先需要深入理解其核心组件——对象关系映射（ORM）。ORM允许开发者使用Python类来表示数据库中的表，从而以一种更直观、面向对象的方式来操作数据库。 SQLAlchemy中的JOIN操作详解在SQLA…...

编程日记 2025/7/17 22:30:22

PTA数据结构作业一

6-1 链表的插入算法本题要求实现一个插入函数，实现在链表llist中的元素x之后插入一个元素y的操作。函数接口定义： int InsertPost_link(LinkList llist, DataType x, DataType y); 其中 llist是操作的链表，x是待插入元素y的前驱节点元素…...

编程日记 2025/7/18 16:43:14

前端（九）js介绍(2)

js介绍(2) 文章目录 js介绍(2)一、函数1.1函数的两种形式1.2函数的作用域1.3声明与提升二、bom操作三、dom操作一、函数 1.1函数的两种形式 //有参函数 //js中的函数只能返回一个值，如果要返回多个需要放在数组或对象中 function func(a,b){return ab } func(1,…...

编程日记 2025/7/18 19:57:50

CUTLASS：高性能 CUDA 线性代数模板库详解

CUTLASS：高性能 CUDA 线性代数模板库详解引言什么是 CUTLASS？CUTLASS 的主要特点： CUTLASS 的用途如何安装 CUTLASS1. 环境准备2. 下载 CUTLASS3. 构建 CUTLASS4. 设置环境变量5. 验证安装使用 CUTLASSCUTLASS 的优势总结引言在深度学习…...

编程日记 2025/7/18 20:07:11

关于CISP报名费用详情

CISP即“注册信息安全专业人员”，是中国信息安全测评中心实施的国家认证项目，旨在培养信息安全领域的专业人才。对于有意报考CISP的考生而言，了解报名考试费用是备考过程中不可或缺的一环。 CISP的报名考试费用主要包括培训费用、考试费用、…...

编程日记 2025/7/18 20:32:24

css 关于flex布局中子元素的属性flex

css flex布局中子元素的属性flex 1. flex 是 flex-grow、flex-shrink 和 flex-basis 的简写语法格式： flex: [flex-grow] [flex-shrink] [flex-basis];各属性解析： flex-grow: 子元素如何按比例分配父元素的剩余空间。默认值：0&#…...

编程日记 2025/7/18 20:02:06

功率器件热设计基础（四）——功率半导体芯片温度和测试方法

/ 前言 / 功率半导体热设计是实现IGBT、碳化硅SiC高功率密度的基础，只有掌握功率半导体的热设计基础知识，才能完成精确热设计，提高功率器件的利用率，降低系统成本，并保证系统的可靠性。功率器件热设计基础系列文章会…...

编程日记 2025/7/18 20:25:32

OpenStack系列第四篇：云平台基础功能与操作（Dashboard）

文章目录 1. 镜像（Image）添加镜像查看镜像删除镜像 2. 卷（Volume）创建卷查看卷删除卷 3. 网络（虚拟网络）创建网络查看网络删除网络 4. 实例类型创建实例类型查看实例类型删除实例类型 4. 密钥对&#xff08…...

编程日记 2025/7/18 20:16:05

WebSocket封装

提示：记录工作中遇到的需求及解决办法文章目录前言二、背景三、WebSocket3.1 什么是 WebSocket ？为什么使用他？四、封装 WebSocket4.1 Javascript 版本4.2 Typescript 版本4.3 如何使用？五、我的痛点如何处理前言本文将介绍 WebSocket 的封装，比如：心跳机制，重连和一…...

编程日记 2025/7/18 20:13:58

面试题解，JVM的运行时数据区

一、请简述JVM运行时数据区的组成结构及各部分作用总览从线程持有的权限来看线程私有区虚拟机栈虚拟机栈是一个栈结构，由许多个栈帧组成，一个方法分配一个栈帧，线程每执行一个方法时都会有一个栈帧入栈，方法执行结束后栈帧…...

编程日记 2025/7/18 17:11:48

【Ubuntu使用技巧】Ubuntu22.04无人值守Crontab工具实战详解

一个愿意伫立在巨人肩膀上的农民...... Crontab是Linux和类Unix操作系统下的一个任务调度工具，用于周期性地执行指定的任务或命令。Crontab允许用户创建和管理计划任务，以便在特定的时间间隔或时间点自动运行命令或脚本。这些任务可以按照分钟、小时、日…...

编程日记 2025/7/18 20:24:21

Caffeine Cache Java缓存组件

缓存组件Caffeine Cache 定义介绍整合springboot用法整合spring-boot-starter-cache用法定义介绍特性高性能：基于高效并发设计和 TinyLFU 算法，命中率高。丰富策略：支持容量限制、过期时间、异步加载、自定义清理策略。统计监控&#x…...

编程日记 2025/7/13 13:58:00

电子电气架构 --- 什么是自动驾驶技术中的域控制单元（DCU）？

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...

编程日记 2025/7/18 20:17:17

Redis核心技术知识点全集

Redis数据结构和常用命令 1. String字符串2. Hash哈希3. List列表4. Set集合5. Sorted Set有序集合6. Redis常用命令参考Redis事务机制...

编程日记 2025/7/18 20:02:08

【每日学点鸿蒙知识】文件读写、屏幕宽度亮度、扫一扫权限、编码器问题、wlan设置

1、参照文档，在操作文件时，读取不到内容或出现程序闪退？ 参照文档，进行文件写入和读取时，出现读取不到或闪退 export function createFile() {// 获取应用文件路径let context getContext(this) as common.UIAbilit…...

编程日记 2025/7/18 20:20:37

后端开发-Maven

环境说明： windows系统：11版本 idea版本：2023.3.2 Maven 介绍 Apache Maven 是一个 Java 项目的构建管理和理解工具。Maven 使用一个项目对象模型（POM），通过一组构建规则和约定来管理项目的构建&#xf…...

编程日记 2025/7/12 17:31:54

LiteFlow 流程引擎引入Spring boot项目集成pg数据库

文章目录官网地址简要项目引入maven 所需jar包配置 PostgreSQL 数据库表使用LiteFlow配置 yml 文件通过代码方式使用 liteflow数据库sql 数据在流程中周转官网地址 https://liteflow.cc/ 简要如果你要对复杂业务逻辑进行新写或者重构，用LiteFlow最合适不过。…...

编程日记 2025/7/18 20:07:10

电子电气架构 --- 汽车电子电器设计概述

编程日记 2025/7/15 4:37:47

API 设计：从基础到最佳实践

https://levelup.gitconnected.com/api-design-101-from-basics-to-best-practices-a0261cdf8886 在本次深入研究中，我们将从基础开始，逐步了解 API 设计，并逐步实现定义卓越 API 的最佳实践。作为开发人员，您可能熟悉其中的许多…...

编程日记 2025/7/15 17:10:10

简易内存池（中）

提示：文章文章目录前言一、背景二、第二版代码用例2用例3用例4用例5 总结前言前期疑问： 本文目标： 一、背景最近二、针对上述失败用例，修改代码如下第二版代码 #include <stdbool.h> #include <stdio.h>…...

编程日记 2025/7/16 1:55:49

svn不能添加.a文件

解决办法在home目录下有一个.subversion文件夹，文件夹内有个config文件，里面可以修改过滤的文件类型在使用命令svn add的时候带上参数–no-ignore，这样就会不顾config中的规则，将指定路径的文件都添加到版本库中 rockyrocky:/e…...

编程日记 2025/7/13 16:43:21

PH47代码框架 24241231 重要更新

仪式感一下：2024年最后一天，发布 PH47 代码框架的一次重要更新。当然这并不是有意的，而是直到现在才把更新的所有工作全部做完（希望确实如此）。本次更新要点： 1、加入多IMU支持。本次更新正式加入对 MPU65…...

编程日记 2025/7/15 4:36:22

小程序信息收集（小迪网络安全笔记~

免责声明：本文章仅用于交流学习，因文章内容而产生的任何违法&未授权行为，与文章作者无关！！！ 附：完整笔记目录~ ps：本人小白，笔记均在个人理解基础上整理，…...

编程日记 2025/7/14 11:12:32

用户界面的UML建模07

4.2 抽象表示层的行为（Abstract Presentation Behaviour） AbstractForm 类定义了一组如下所示的四种操作： showForm() ， getData() ， sendConfirmation() 和sendCancellation()。在该阶段的设计过程（desig…...

编程日记 2025/7/17 0:00:14

LabVIEW手部运动机能实验系统

在运动科学、人机交互和康复训练等领域，手部运动功能的研究具有重要的应用价值。开发了一个基于LabVIEW的手部运动机能实验系统设计，该系统利用力量作为关键参数，通过实时数据采集和反馈帮助受试者完成精确的手部动作，同时为研究人…...

编程日记 2025/7/14 0:05:03

Java Map 源码解析：核心原理与应用

Java Map 源码解析：核心原理与应用 Java 的 Map 接口是集合框架中一个重要的组成部分，专门用于存储键值对。其强大的功能和灵活的实现使其在各种应用场景中得到了广泛的使用。本文面向对 Java 集合框架有一定了解的开发者，通过对 Map 接口及…...

编程日记 2025/7/16 16:15:05

基于Mosquito源码理解MQTT5.0的属性概念

MQTT 5.0协议相比之前的版本（如MQTT 3.1.1）增加了很多属性，这些属性分布于报文的可变头部（Variable Header）和有效载荷（Payload）中。这些属性大大增强了协议的可扩展性和灵活性，使其能够更好地适应现代物联网应用的复杂需求。属性的定义在源码包mosquitto-2.0.18/inc…...

编程日记 2025/7/17 8:37:33

easyui textbox使用placeholder无效

easyui textbox使用placeholder无效在easyui 的textbox控件，请使用data-options 设定示例 <input type text class easyui-textbox data-options "prompt:请输入您的邮箱"/>...

编程日记 2025/7/4 21:08:32

java AQS

什么是AQS AQS（AbstractQueuedSynchronizer，抽象队列同步器）是 Java 中并发控制的一种机制，位于 java.util.concurrent.locks 包下，它为构建锁、信号量等同步工具提供了一个框架。AQS 通过队列来管理多个线程之间的…...

编程日记 2025/7/14 20:24:11

机器人对物体重定向操作的发展简述

物体重定向操作的发展简述前言1、手内重定向和外部重定向2、重定向原语3、重定向状态转换网络4、连续任意姿态的重定向5、利用其他环境约束重定向总结Reference 前言对于一些特殊的任务（如装配和打包），对物体放置的位姿由明确的要求&#…...

编程日记 2025/7/16 21:21:08

数据结构与算法之动态规划: LeetCode 72. 编辑距离 (Ts版)

编辑距离 https://leetcode.cn/problems/edit-distance/description/ 描述给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数你可以对一个单词进行如下三种操作： 插入一个字符删除一个字符替换一个字符示例 1 输入&…...

编程日记 2025/7/15 22:13:36

vue3 Teleport瞬移组件

Teleport是瞬移组件，也称为传送门组件它是一个可以使元素从一个组件转到另一个组件的组件。如对话框、自定义菜单、警告提示、徽章，以及许多其他需要出现在特殊位置的自定义UI组件。假设现在页面中有两个元素，分别为div元素和button按钮元…...

编程日记 2025/7/14 18:33:20

Go语言学习路线

以下是一个较为系统的Go语言学习路线： 一、基础阶段环境搭建与工具链熟悉安装Go语言开发环境。在Go官方网站（https://golang.org/dl/）下载适合您操作系统的安装包并完成安装。配置Go环境变量，如GOPATH和GOROOT。GOROOT是Go语…...

编程日记 2025/7/14 12:05:45

摄像头监视脚本

摄像头监视脚本，若检测到摄像头画面有变化，保存这一段视频一、使用方法 1.运行脚本默认参数Threshold3, Period3, path./recordings python cam.py --threshold30 --period3 --path./recordings 2.参数说明 threshold:摄像头捕获到的画面变化量阈值…...

编程日记 2025/7/15 15:28:19