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

HTML5 开关（Toggle Switch）详细讲解

news 2025/9/16 3:52:13

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

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/8/28 23:03:34

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/8 17:56:14

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/8/30 16:34:33

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/9/7 3:22:38

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51