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

HTML5 开关（Toggle Switch）详细讲解

news 2025/11/12 17:01:59

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 开关&#xff08;Toggle Switch&#xff09;详细讲解 1. 任务概述 开关&#xff08;Toggle Switch&#xff09;是一种用于表示二元状态&#xff08;如开/关&#xff09;的用户界面控件。用户可以通过点击开关来切换状态&#xff0c;常见于设置选项、开关功能等场景。 2…...

编程日记 2025/1/1 14:38:01

win32汇编环境下，双击窗口程序内生成的listview列表控件的某行，并提取其内容的示例程序

;运行效果 ;双击后 ;上源码&#xff0c;仔细研究里面的几条备注就理解原理了 ;提取窗口程序内生成的listview列表控件的内容示例程序 ;抄下面源码&#xff0c;可以在radasm里面直接编译运行。主要的部分加了备注。 ;>>>>>>>>>>>>>>…...

编程日记 2025/1/1 14:37:00

mysql主从断开后问题排查及修复

服务器mysql主从同步断开后&#xff0c;进行主从恢复 问题&#xff1a;mysql的主从断开了&#xff0c;在从服务器上通过以下命令查看状态&#xff0c;发现Slave_SQL_Running为No SHOW SLAVE STATUS\G;Slave_IO_Running&#xff1a;表示从服务器读取主服务器日志的线程 Slave_…...

编程日记 2025/1/1 14:34:57

[2025] 如何在 Windows 计算机上轻松越狱 IOS 设备

笔记 1. 首次启动越狱工具时&#xff0c;会提示您安装驱动程序。单击“是”确认安装&#xff0c;然后再次运行越狱工具。 2. 对于Apple 6s-7P和iPad系列&#xff08;iOS14.4及以上&#xff09;&#xff0c;您应该点击“Optinos”并勾选“允许未经测试的iOS/iPadOS/tvOS版本”&…...

编程日记 2025/1/1 14:33:54

计算机网络—————考研复试

第一章、计算机网络体系结构 1. OSI参考模型和TCP/IP模型&#xff1a; OSI与TCP/IP的记忆方法&#xff1a;只需把OSI的七层记住&#xff0c;将应用层、表示层、会话层一起记&#xff0c;到TCP/IP变成应用层。物理层和数据链路层换成网络接口层。把网络层换个字变成网际层。 而…...

编程日记 2025/1/1 14:32:52

[pdf、epub]260道《软件方法》强化自测题业务建模需求分析共216页（202412更新）

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 260道《软件方法》强化自测题业务建模需求分析共216页&#xff08;202412更新&#xff09; 已上传到本CSDN账号的资源 如果下载不到&#xff0c;也可以访问以下链接&#xff1a; ht…...

编程日记 2025/1/1 14:29:49

LeetCode - 初级算法 数组（只出现一次的数字）

只出现一次的数字 这篇文章讨论如何找到一个数组中只出现一次的数字，确保算法的时间复杂度为线性，且只使用常量额外空间。 免责声明：本文来源于个人知识与公开资料，仅用于学术交流。 描述 给定一个非空整数数组 nums，除了某个元素只出现一次以外，其余每个元素均出现两…...

编程日记 2025/1/1 14:24:44

Android性能优化概述

应用启动速度慢页面加载慢交互卡顿CrashANR 针对这些问题&#xff0c;可以逐一进行优化 1.启动优化 Android应用启动分为冷启动和热启动以及初次安装启动&#xff0c;此处只分析冷启动及热启动 冷启动&#xff1a;当设备无该应用进程时&#xff0c;用户操作拉起应用&#xff…...

编程日记 2025/1/1 14:21:37

C++ 实现map容器从大到小排序

map容器默认从小到大排序 利用仿函数可以修改map容器的排序规则为从大到小 示例&#xff1a; #include<iostream> #include<string> #include<map> using namespace std; class MyCompare { public: bool operator()(const int v1, const int v2) co…...

编程日记 2025/1/1 14:19:34

java中的文件操作

基础知识 1.File类对象的常用方法 一、 创建文件和目录 1.createNewFile() 用于创建一个新的文件&#xff0c;如果文件已经存在&#xff0c;则返回 false File file new File("C:\\Users\\P51\\Desktop\\file.txt"); file.createNewFile(); 2.mkdir() 用于创建一个…...

编程日记 2025/1/1 14:17:32

修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题

适配OpenHarmony系统相机应用横屏UI&#xff0c; 相关pr: https://gitee.com/openharmony/applications_camera/pulls/233/files 适配效果 如何安装 编译好的hap提供在附件中 1.预置在源码&#xff0c;随固件安装 2.安装hap hdc shell "mount -o remount,rw /"…...

编程日记 2025/1/1 14:14:29

2024165读书笔记|《飞花令·合》——人生飘忽百年内，且须酣畅万古情

2024165读书笔记|《飞花令合》—— 人生飘忽百年内&#xff0c;且须酣畅万古情 屈原班婕妤曹植刘绘卢思道卢照邻苏味道刘希夷李白高适杜甫司空曙白居易温庭筠韦庄窦叔向张泌林逋柳永晏殊欧阳修李觏舒亶秦观陈瓘李清照陆游辛弃疾姜夔蒋捷吴伟业纳兰性德张惠言邓廷桢 《飞花令合》…...

编程日记 2025/1/1 14:09:25

哈夫曼编码(Huffman Coding)与哈夫曼树(Huffman Tree)

已知字符集{a,b,c,d,e,f}&#xff0c;若各字符出现的次数分别为6&#xff0c;3&#xff0c;8&#xff0c;2&#xff0c;10&#xff0c;4&#xff0c;则对应字符集中各字符的哈夫曼编码可能是&#xff08; &#xff09;。 A.00&#xff0c;1011&#xff0c;01&#xff0…...

编程日记 2025/1/1 14:08:24

Django项目中高效管理和使用选择常量

引言 在开发Django项目时，我们经常需要处理各种选择字段，比如用户类型、订单状态或产品分类等。如何有效地管理这些选择常量，使其在整个项目中保持一致性，同时又易于维护和更新呢？本文将介绍一种在Django项目中集中管理和使用选择常量的方法。 正文 © ivwdcwso (I…...

编程日记 2025/1/1 14:06:22

拦截器（Interceptor）的使用

在Java Web开发中&#xff0c;拦截器&#xff08;Interceptor&#xff09;是一种动态拦截请求和响应的对象&#xff0c;它可以在请求被控制器处理之前和之后执行一些预处理和后处理逻辑。要定义一个拦截器并使其生效&#xff0c;通常需要以下几个步骤&#xff1a; 1. 定义拦截…...

编程日记 2025/1/1 14:05:20

线段树例题题解

卫星覆盖&#xff08;NOI1997&#xff09; 题面&#xff1a; SERCOI&#xff08;Space-Earth Resource Cover-Observe lnstitute&#xff09; 是一个致力于利用卫星技术对空间和地球资源进行覆盖观测的组织。现在他们研制成功一种新型资源观测卫星 -SERCOI-308。这种卫星可以…...

编程日记 2025/1/1 14:04:18

AI提示词工程的“优化背后”：如何通过精准提示提升模型性能？

提示词工程（Prompt Engineering）已经成为推动AI模型如GPT等发挥其强大能力的核心。AI模型的输出质量与输入的提示词密切相关。因为之前已经大致用过一段时间提示词，所以这篇文章集中在有一定基础，起码对提示词不陌生，想要去设计和优化提示词+处理复杂问题的时候不知道如何…...

编程日记 2025/1/1 13:56:09

c# Record关键字

在 C# 9.0 中引入了 record 关键字&#xff0c;用于定义记录类型&#xff08;Record Types&#xff09;。记录类型是一种轻量级的数据载体&#xff0c;专注于表示数据&#xff0c;它提供了内置的相等性比较、生成属性和方法等功能&#xff0c;使得编写数据类更加简洁和高效。 …...

编程日记 2025/1/1 13:52:05

高效管理 Nginx 的利器：nginxWebUI 指南和 Docker 部署安装过程

前言 Nginx WebUI 是一个为 Nginx 提供图形化管理界面的工具。通过 WebUI&#xff0c;用户可以轻松管理 Nginx 配置&#xff0c;而无需直接编辑配置文件&#xff0c;尤其适合新手用户和频繁修改配置的场景。 官网文档&#xff1a;nginxWebUI - 文档 本文将分享为什么选择 ngin…...

编程日记 2025/1/1 13:51:04

家政预约小程序04活动管理表结构设计

目录 1 创建活动表2 创建活动规则表3 创建活动参与记录表总结 为了满足我们日常的营销&#xff0c;我们通常需要搞一些活动&#xff0c;比如满减、折扣、团购等。启动活动后&#xff0c;会在首页进行显示&#xff0c;当用户访问小程序的时候&#xff0c;就可以参与活动&#xf…...

编程日记 2025/1/1 13:49:02

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/7 14:07:42

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/11/7 20:04:46

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/12 15:12:42

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

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

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

编程新知 2025/10/17 12:01:41

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/11/8 5:57:07

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/11/8 7:44:02

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/9 15:37:23

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38