HTML5 开关（Toggle Switch）详细讲解
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…...
win32汇编环境下，双击窗口程序内生成的listview列表控件的某行，并提取其内容的示例程序
;运行效果 ;双击后 ;上源码，仔细研究里面的几条备注就理解原理了 ;提取窗口程序内生成的listview列表控件的内容示例程序 ;抄下面源码，可以在radasm里面直接编译运行。主要的部分加了备注。 ;>>>>>>>>>>>>>>…...
mysql主从断开后问题排查及修复
服务器mysql主从同步断开后，进行主从恢复 问题：mysql的主从断开了，在从服务器上通过以下命令查看状态，发现Slave_SQL_Running为No SHOW SLAVE STATUS\G;Slave_IO_Running：表示从服务器读取主服务器日志的线程 Slave_…...
[2025] 如何在 Windows 计算机上轻松越狱 IOS 设备
笔记 1. 首次启动越狱工具时，会提示您安装驱动程序。单击“是”确认安装，然后再次运行越狱工具。 2. 对于Apple 6s-7P和iPad系列（iOS14.4及以上），您应该点击“Optinos”并勾选“允许未经测试的iOS/iPadOS/tvOS版本”&…...
计算机网络—————考研复试
第一章、计算机网络体系结构 1. OSI参考模型和TCP/IP模型： OSI与TCP/IP的记忆方法：只需把OSI的七层记住，将应用层、表示层、会话层一起记，到TCP/IP变成应用层。物理层和数据链路层换成网络接口层。把网络层换个字变成网际层。 而…...
[pdf、epub]260道《软件方法》强化自测题业务建模需求分析共216页（202412更新）
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 260道《软件方法》强化自测题业务建模需求分析共216页（202412更新） 已上传到本CSDN账号的资源 如果下载不到，也可以访问以下链接： ht…...
LeetCode - 初级算法 数组（只出现一次的数字）
只出现一次的数字 这篇文章讨论如何找到一个数组中只出现一次的数字，确保算法的时间复杂度为线性，且只使用常量额外空间。 免责声明：本文来源于个人知识与公开资料，仅用于学术交流。 描述 给定一个非空整数数组 nums，除了某个元素只出现一次以外，其余每个元素均出现两…...
Android性能优化概述
应用启动速度慢页面加载慢交互卡顿CrashANR 针对这些问题，可以逐一进行优化 1.启动优化 Android应用启动分为冷启动和热启动以及初次安装启动，此处只分析冷启动及热启动 冷启动：当设备无该应用进程时，用户操作拉起应用ÿ…...
C++ 实现map容器从大到小排序
map容器默认从小到大排序 利用仿函数可以修改map容器的排序规则为从大到小 示例： #include<iostream> #include<string> #include<map> using namespace std; class MyCompare { public: bool operator()(const int v1, const int v2) co…...
java中的文件操作
基础知识 1.File类对象的常用方法 一、 创建文件和目录 1.createNewFile() 用于创建一个新的文件，如果文件已经存在，则返回 false File file new File("C:\\Users\\P51\\Desktop\\file.txt"); file.createNewFile(); 2.mkdir() 用于创建一个…...
修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题
适配OpenHarmony系统相机应用横屏UI， 相关pr: https://gitee.com/openharmony/applications_camera/pulls/233/files 适配效果 如何安装 编译好的hap提供在附件中 1.预置在源码，随固件安装 2.安装hap hdc shell "mount -o remount,rw /"…...
2024165读书笔记|《飞花令·合》——人生飘忽百年内，且须酣畅万古情
2024165读书笔记|《飞花令合》—— 人生飘忽百年内，且须酣畅万古情 屈原班婕妤曹植刘绘卢思道卢照邻苏味道刘希夷李白高适杜甫司空曙白居易温庭筠韦庄窦叔向张泌林逋柳永晏殊欧阳修李觏舒亶秦观陈瓘李清照陆游辛弃疾姜夔蒋捷吴伟业纳兰性德张惠言邓廷桢 《飞花令合》…...
哈夫曼编码(Huffman Coding)与哈夫曼树(Huffman Tree)
已知字符集{a,b,c,d,e,f}，若各字符出现的次数分别为6，3，8，2，10，4，则对应字符集中各字符的哈夫曼编码可能是（ ）。 A.00，1011，01࿰…...
Django项目中高效管理和使用选择常量
引言 在开发Django项目时，我们经常需要处理各种选择字段，比如用户类型、订单状态或产品分类等。如何有效地管理这些选择常量，使其在整个项目中保持一致性，同时又易于维护和更新呢？本文将介绍一种在Django项目中集中管理和使用选择常量的方法。 正文 © ivwdcwso (I…...
拦截器（Interceptor）的使用
在Java Web开发中，拦截器（Interceptor）是一种动态拦截请求和响应的对象，它可以在请求被控制器处理之前和之后执行一些预处理和后处理逻辑。要定义一个拦截器并使其生效，通常需要以下几个步骤： 1. 定义拦截…...
线段树例题题解
卫星覆盖（NOI1997） 题面： SERCOI（Space-Earth Resource Cover-Observe lnstitute） 是一个致力于利用卫星技术对空间和地球资源进行覆盖观测的组织。现在他们研制成功一种新型资源观测卫星 -SERCOI-308。这种卫星可以…...
AI提示词工程的“优化背后”：如何通过精准提示提升模型性能？
提示词工程（Prompt Engineering）已经成为推动AI模型如GPT等发挥其强大能力的核心。AI模型的输出质量与输入的提示词密切相关。因为之前已经大致用过一段时间提示词，所以这篇文章集中在有一定基础，起码对提示词不陌生，想要去设计和优化提示词+处理复杂问题的时候不知道如何…...
c# Record关键字
在 C# 9.0 中引入了 record 关键字，用于定义记录类型（Record Types）。记录类型是一种轻量级的数据载体，专注于表示数据，它提供了内置的相等性比较、生成属性和方法等功能，使得编写数据类更加简洁和高效。 …...
高效管理 Nginx 的利器：nginxWebUI 指南和 Docker 部署安装过程
前言 Nginx WebUI 是一个为 Nginx 提供图形化管理界面的工具。通过 WebUI，用户可以轻松管理 Nginx 配置，而无需直接编辑配置文件，尤其适合新手用户和频繁修改配置的场景。 官网文档：nginxWebUI - 文档 本文将分享为什么选择 ngin…...
家政预约小程序04活动管理表结构设计
目录 1 创建活动表2 创建活动规则表3 创建活动参与记录表总结 为了满足我们日常的营销，我们通常需要搞一些活动，比如满减、折扣、团购等。启动活动后，会在首页进行显示，当用户访问小程序的时候，就可以参与活动…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
return this；返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...