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

html实现iphone同款开关

news 2026/2/9 20:57:22

一、背景

想实现一个开关的按钮，来触发一些操作，网上找了总感觉看着别扭，忽然想到iphone的开关挺好，搞一个

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关按钮</title><style>.switch {position: relative;display: inline-block;width: 60px;height: 34px;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;border-radius: 34px;}.slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;border-radius: 50%;}input:checked + .slider {background-color: #4CD964;}input:focus + .slider {box-shadow: 0 0 1px #4CD964;}input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}.slider.round {border-radius: 34px;}.slider.round:before {border-radius: 50%;}</style>
</head>
<body>
<div><label class="switch"><input type="checkbox" id="mySwitch" onchange="updateStatus()"><span class="slider round"></span></label>
</div>
<script>function updateStatus() {let switchStatus = document.getElementById("mySwitch").checked;if (switchStatus) {console.log("已开启");} else {console.log("已关闭");}}
</script>
</body>
</html>

效果：

关闭：

开启：

 

 

相关文章：

html实现iphone同款开关

一、背景 想实现一个开关的按钮&#xff0c;来触发一些操作&#xff0c;网上找了总感觉看着别扭&#xff0c;忽然想到iphone的开关挺好&#xff0c;搞一个 二、代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&qu…...

编程日记 2023/8/16 16:59:28

使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能？

思维导图是一种流行的知识图谱工具&#xff0c;可以帮助我们更好地组织和理解复杂的思维关系。在开发基于Vue的思维导图应用时&#xff0c;实现历史版本控制和撤销/重做功能是非常有用的。以下为您介绍如何使用Vue和jsmind插件来实现这些功能。 安装依赖 首先&#xff0c;我们…...

编程日记 2023/8/16 16:58:27

【Vue-Router】路由元信息

路由元信息&#xff08;Route Meta Information&#xff09;是在路由配置中为每个路由定义的一组自定义数据。这些数据可以包含任何你希望在路由中传递和使用的信息&#xff0c;比如权限、页面标题、布局设置等。Vue Router 允许你在路由配置中定义元信息&#xff0c;然后在组件…...

编程日记 2023/8/16 16:57:25

vue 控件的四个角设置 父视图position:relative

父视图relative&#xff0c;子视图 absolute <div class"bg1"> <i class"topL"></i> <i class"topR"></i> <i class"bottomL"></i> <i class"bottomR"></i> <di…...

编程日记 2023/8/16 16:56:24

VM中linux虚拟机配置桥接模式（虚拟机与宿主机网络互通）

VM虚拟机配置桥接模式&#xff0c;可以让虚拟机和物理主机一样存在于局域网中&#xff0c;可以和主机相通&#xff0c;和互联网相通&#xff0c;和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&…...

编程日记 2023/8/16 16:55:23

7.Eclipse中改变编码方式及解决部分乱码问题

1、改变整个工作空间的编码方式&#xff1a; 点击Window->Preference->General->workplace&#xff0c;然后选择默认编码方式 2、改变某个项目的编码方式&#xff1a; 右键点击项目名->Properties>Resource&#xff0c;然后选择默认编码方式。 问题&#xff…...

编程日记 2023/8/16 16:54:21

grafana 的 ws websocket 连接不上的解决方式

使用了多层的代理方式&#xff0c;一层没有此问题 错误 WebSocket connection to ‘wss://ip地址/grafana01/api/live/ws’ failed: 日志报错 msg“Request Completed” methodGET path/api/live/ws status403 解决方式 # allowed_origins is a comma-separated list of o…...

编程日记 2023/8/16 16:53:19

多环境_部署项目

多环境&#xff1a; 指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。 为什么需要&#xff1f; 1. 每个环境互不影响 2. 区分不同的阶段&#xff1a;开发 / 测试 / 生产 3. 对项目进行优化&#xff1a; 1. 本地日志级别 2. 精简依赖&a…...

编程日记 2023/8/16 16:52:13

go web框架 gin-gonic源码解读02————router

go web框架 gin-gonic源码解读02————router 本来想先写context&#xff0c;但是发现context能简单讲讲的东西不多&#xff0c;就准备直接和router合在一起讲好了 router是web服务的路由&#xff0c;是指讲来自客户端的http请求与服务器端的处理逻辑或者资源相映射的机制。&…...

编程日记 2023/8/16 16:51:12

【Java后端封装数据】常见后端封装数据的格式，用于返回给前端使用（109）

数据格式一&#xff1a;包装 List Map 返回&#xff0c;常用于数据展示&#xff1b; // Controller&#xff1a;public Result selectRegConfig(RequestBody String param) {try {Map<String, Object> paramMap JsonUtils.readValue(param, Map.class);return Result.su…...

编程日记 2023/8/16 16:50:11

无脑入门pytorch系列（三）—— nn.Linear

本系列教程适用于没有任何pytorch的同学&#xff08;简单的python语法还是要的&#xff09;&#xff0c;从代码的表层出发挖掘代码的深层含义&#xff0c;理解具体的意思和内涵。pytorch的很多函数看着非常简单&#xff0c;但是其中包含了很多内容&#xff0c;不了解其中的意思…...

编程日记 2023/8/16 16:49:10

SQL Server用sql语句添加列，添加列注释

SQL Server用sql语句添加列&#xff0c;添加列注释 微软文档&#xff1a; https://learn.microsoft.com/zh-cn/sql/relational-databases/tables/add-columns-to-a-table-database-engine?viewsql-server-ver15 alter table article add RedirectURL varchar(600) nu…...

编程日记 2023/8/16 16:48:08

springBoot中service层查询使用多线程CompletableFuture（有返回值）

重点&#xff1a; 1. 创建线程池 Executor executor Executors.newCachedThreadPool();//保存线程List<CompletableFuture<Void>> futures new ArrayList<>();2.使用 //这里可以是多个看下面代码是在for中使用的 CompletableFuture<Void> future …...

编程日记 2023/8/16 16:47:05

畜牧虚拟仿真 | 鱼授精过程VR模拟演练系统

随着科技的发展&#xff0c;虚拟现实(VR)技术逐渐渗透到各个领域&#xff0c;为人们提供了更加真实、直观的体验。在动物养殖教育领域&#xff0c;鱼授精过程VR模拟演练系统正成为一种新的教学手段&#xff0c;它能够帮助人们更好地理解和掌握鱼授精的操作技巧&#xff0c;从而…...

编程日记 2023/8/16 16:46:03

第一百一十四回 局部动态列表

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了dart语言中的 setter/getter相关的内容&#xff0c;本章回中将介绍 局部动态列表.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在正常情况下列表位于整个页面中&#xff0c;而且可以在整个页面中滚动…...

编程日记 2023/8/16 16:45:01

多尺度目标检测【动手学深度学习】

在上篇博客《锚框【目标检测】》中，我们以输入图像的每个像素为中心，生成多个锚框。基本而言，这些锚框代表了图像不同区域的样本。然而如果以每个像素都生成的锚框，最后可能会得到太多需要计算的锚框。想象一个561728的输入图像，如果以每个像素为中心生成五个形状不同的锚…...

编程日记 2023/8/16 16:44:00

elasticsearch 基础

ES 搜索技术历史 今天看的是《Elasticsearch实战与原理解析》 第一章 搜索技术发展史 1、搜索技术发展史 宏观而言&#xff0c;搜索引擎的发展经历了五个尖端和两大分类。五个阶段分别是ftp文件检索阶段、分类目录阶段、文本相关性检索阶段、网页链接分析阶段和用户意图识别…...

编程日记 2023/8/16 16:42:59

【BUG】docker安装nacos，浏览器却无法访问到页面

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…...

编程日记 2023/8/16 16:41:56

C#引用Web Service 类型方法，添加搜索本地服务器Web Service 接口调用方法

首先保证现在网络能调用web service接口&#xff0c;右键项目添加服务引用 ![![在这里插入图片描述](https://img-blog.csdnimg.cn/555ba4fa5e2a418f8f85539a9406bcd6.png) 点击高级 添加web服务 输入搜索的服务器接口&#xff0c;选中你要添加调用的方法即可 添加完成调用方…...

编程日记 2023/8/16 16:40:53

yolov8训练进阶：新增配置参数

续yolov8训练进阶&#xff1a;自定义训练脚本&#xff0c;从配置文件载入训练超参数_CodingInCV的博客-CSDN博客 尽管yolov8有很多参数可以设置&#xff0c;但难免我们训练过程中会需要增加自己的参数&#xff0c;如新的数据增强、自定义的一些条件。那么在yolov8中如何实现呢&…...

编程日记 2023/8/16 16:39:51

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/9 2:15:44

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

Python异步编程：深入理解协程的原理与实践指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…...

编程新知 2026/2/5 2:28:10

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

编程新知 2025/9/11 18:09:26