html实现iphone同款开关
一、背景
想实现一个开关的按钮，来触发一些操作，网上找了总感觉看着别扭，忽然想到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同款开关
一、背景 想实现一个开关的按钮，来触发一些操作，网上找了总感觉看着别扭，忽然想到iphone的开关挺好，搞一个 二、代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&qu…...
使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能？
思维导图是一种流行的知识图谱工具，可以帮助我们更好地组织和理解复杂的思维关系。在开发基于Vue的思维导图应用时，实现历史版本控制和撤销/重做功能是非常有用的。以下为您介绍如何使用Vue和jsmind插件来实现这些功能。 安装依赖 首先，我们…...
【Vue-Router】路由元信息
路由元信息（Route Meta Information）是在路由配置中为每个路由定义的一组自定义数据。这些数据可以包含任何你希望在路由中传递和使用的信息，比如权限、页面标题、布局设置等。Vue Router 允许你在路由配置中定义元信息，然后在组件…...
vue 控件的四个角设置 父视图position:relative
父视图relative，子视图 absolute <div class"bg1"> <i class"topL"></i> <i class"topR"></i> <i class"bottomL"></i> <i class"bottomR"></i> <di…...
VM中linux虚拟机配置桥接模式（虚拟机与宿主机网络互通）
VM虚拟机配置桥接模式，可以让虚拟机和物理主机一样存在于局域网中，可以和主机相通，和互联网相通，和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式，它们分别是：Bridged（桥接模式&…...
7.Eclipse中改变编码方式及解决部分乱码问题
1、改变整个工作空间的编码方式： 点击Window->Preference->General->workplace，然后选择默认编码方式 2、改变某个项目的编码方式： 右键点击项目名->Properties>Resource，然后选择默认编码方式。 问题ÿ…...
grafana 的 ws websocket 连接不上的解决方式
使用了多层的代理方式，一层没有此问题 错误 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…...
多环境_部署项目
多环境： 指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。 为什么需要？ 1. 每个环境互不影响 2. 区分不同的阶段：开发 / 测试 / 生产 3. 对项目进行优化： 1. 本地日志级别 2. 精简依赖&a…...
go web框架 gin-gonic源码解读02————router
go web框架 gin-gonic源码解读02————router 本来想先写context，但是发现context能简单讲讲的东西不多，就准备直接和router合在一起讲好了 router是web服务的路由，是指讲来自客户端的http请求与服务器端的处理逻辑或者资源相映射的机制。&…...
【Java后端封装数据】常见后端封装数据的格式，用于返回给前端使用（109）
数据格式一：包装 List Map 返回，常用于数据展示； // Controller：public Result selectRegConfig(RequestBody String param) {try {Map<String, Object> paramMap JsonUtils.readValue(param, Map.class);return Result.su…...
无脑入门pytorch系列（三）—— nn.Linear
本系列教程适用于没有任何pytorch的同学（简单的python语法还是要的），从代码的表层出发挖掘代码的深层含义，理解具体的意思和内涵。pytorch的很多函数看着非常简单，但是其中包含了很多内容，不了解其中的意思…...
SQL Server用sql语句添加列，添加列注释
SQL Server用sql语句添加列，添加列注释 微软文档： 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…...
springBoot中service层查询使用多线程CompletableFuture（有返回值）
重点： 1. 创建线程池 Executor executor Executors.newCachedThreadPool();//保存线程List<CompletableFuture<Void>> futures new ArrayList<>();2.使用 //这里可以是多个看下面代码是在for中使用的 CompletableFuture<Void> future …...
畜牧虚拟仿真 | 鱼授精过程VR模拟演练系统
随着科技的发展，虚拟现实(VR)技术逐渐渗透到各个领域，为人们提供了更加真实、直观的体验。在动物养殖教育领域，鱼授精过程VR模拟演练系统正成为一种新的教学手段，它能够帮助人们更好地理解和掌握鱼授精的操作技巧，从而…...
第一百一十四回 局部动态列表
文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了dart语言中的 setter/getter相关的内容，本章回中将介绍 局部动态列表.闲话休提，让我们一起Talk Flutter吧。 概念介绍 在正常情况下列表位于整个页面中，而且可以在整个页面中滚动…...
多尺度目标检测【动手学深度学习】
在上篇博客《锚框【目标检测】》中，我们以输入图像的每个像素为中心，生成多个锚框。基本而言，这些锚框代表了图像不同区域的样本。然而如果以每个像素都生成的锚框，最后可能会得到太多需要计算的锚框。想象一个561728的输入图像，如果以每个像素为中心生成五个形状不同的锚…...
elasticsearch 基础
ES 搜索技术历史 今天看的是《Elasticsearch实战与原理解析》 第一章 搜索技术发展史 1、搜索技术发展史 宏观而言，搜索引擎的发展经历了五个尖端和两大分类。五个阶段分别是ftp文件检索阶段、分类目录阶段、文本相关性检索阶段、网页链接分析阶段和用户意图识别…...
【BUG】docker安装nacos，浏览器却无法访问到页面
个人主页：金鳞踏雨 个人简介：大家好，我是金鳞，一个初出茅庐的Java小白 目前状况：22届普通本科毕业生，几经波折了，现在任职于一家国内大型知名日化公司，从事Java开发工作 我的博客&am…...
C#引用Web Service 类型方法，添加搜索本地服务器Web Service 接口调用方法
首先保证现在网络能调用web service接口，右键项目添加服务引用  点击高级 添加web服务 输入搜索的服务器接口，选中你要添加调用的方法即可 添加完成调用方…...
yolov8训练进阶：新增配置参数
续yolov8训练进阶：自定义训练脚本，从配置文件载入训练超参数_CodingInCV的博客-CSDN博客 尽管yolov8有很多参数可以设置，但难免我们训练过程中会需要增加自己的参数，如新的数据增强、自定义的一些条件。那么在yolov8中如何实现呢&…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...