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>

效果:

关闭:

开启:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/85827.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络编程(二)】NIO快速入门

NIO Java NIO 三大核心组件 Buffer&#xff08;缓冲区&#xff09;&#xff1a;每个客户端连接都会对应一个Buffer&#xff0c;读写数据通过缓冲区读写。Channel&#xff08;通道&#xff09;&#xff1a;每个channel用于连接Buffer和Selector&#xff0c;通道可以进行双向读…

PHP傻瓜也能搭建自己框架

PHP最简单自定义自己的框架&#xff08;一&#xff09; PHP最简单自定义自己的框架创建目录结构&#xff08;二&#xff09; PHP最简单自定义自己的框架定义常量自动生成目录&#xff08;三&#xff09; PHP最简单自定义自己的框架控制器自动加载运行&#xff08;四&#xf…

《Java-SE-第三十四章》之Optional

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…

CMake: 检测并使用OpenMP的并行环境

CMake: 检测OpenMP的并行环境 导言OpenMP简介项目结构CMakeLists.txt相关源码输出结果 导言 目前&#xff0c;市面上的计算机几乎都是多核机器&#xff0c;对于性能敏感的程序&#xff0c;我们必须关注这些多核处理器&#xff0c;并在编程模型中使用并发。OpenMP是多核处理器上…

数据库管理员知识图谱

初入职场的程序猿&#xff0c;需要为自己做好职业规划&#xff0c;在职场的赛道上&#xff0c;需要保持学习&#xff0c;并不断点亮自己的技能树。  成为一名DBA需要掌握什么技能呢&#xff0c;先让Chat-GPT为我们回答一下&#xff1a; 数据库管理系统 (DBMS)知识&#xff…

C语言案例 阶乘求和-12

题目&#xff1a;求1 2&#xff01;3&#xff01; … 20&#xff01;的和。 程序分析 阶乘相关原理&#xff1a;一个正整数的阶乘是所有小于及等于该数的正整数的积&#xff0c;并且0的阶乘为1。自然数n的阶乘写作n!&#xff0c;任何大于1的自然数n阶乘表示方法&#xff1a;…

Flink多流处理之connect拼接流

Flink中的拼接流connect的使用其实非常简单,就是leftStream.connect(rightStream)的方式,但是有一点我们需要清楚,使用connect后并不是将两个流给串联起来了,而是将左流和右流建立一个联系,作为一个大的流,并且这个大的流可以使用相同的逻辑处理leftStream和rightStream,也可以…

湘大 XTU OJ 1308 比赛 题解:循环结束的临界点+朴素模拟

一、链接 比赛 二、题目 题目描述 有n个人要进行比赛&#xff0c;比赛规则如下&#xff1a; 假设每轮比赛的人是m&#xff0c;取最大的k&#xff0c;k2^t且k≤m。这k个人每2人举行一场比赛&#xff0c;胜利者进入一下轮&#xff0c;失败者被淘汰。余下的m-k个人&#xff0…

iOS问题记录 - Xcode 15安装低版本iOS模拟器(持续更新)

文章目录 前言开发环境问题描述问题分析1. 定位问题2. 逆向分析2.1. IDA Free2.2. Hopper Disassembler Demo 3. 模拟器日志4. supportedArchs 解决方案最后 前言 最近新需求很多&#xff0c;项目改动很大&#xff0c;开发完成后想测一遍在低版本iOS系统上的兼容性&#xff0c…

Oracle 开发篇+Java通过共享模式访问Oracle数据库

标签&#xff1a;共享服务器进程、shared server process释义&#xff1a;shared server process是Oracle的一种数据库连接技术&#xff0c;类似的还有专用模式和DRCP ★ 数据库配置 alter system set shared_server_sessions1 scopespfile; alter system set max_shared_serv…

大连交通大学813软件工程考研习题

1.什么是软件生存周期模型?有哪些主要模型? 生存周期模型&#xff1a;描述软件开发过程中各种活动如何执行的模型。对软件开发提供强有力的支持&#xff0c;为开发过程中的活动提供统一的政策保证&#xff0c;为参与开发的人员提供帮助和指导&#xff0c;是软件生存周期模型…

【学习FreeRTOS】第5章——FreeRTOS任务挂起与恢复

1.任务的挂起与恢复的API函数 vTaskSuspend() ——挂起任务&#xff08;类似暂停&#xff0c;可恢复&#xff0c;但删除任务&#xff0c;无法恢复&#xff09;vTaskResume() ——恢复被挂起的任务xTaskResumeFromISR()—— 在中断中恢复被挂起的任务 1.1.任务挂起函数vTaskSu…

Grafana+Prometheus技术文档-进阶使用-监控spring-boot项目

阿丹&#xff1a; 之前已经实现了使用Prometheus来对服务器进行了监控和仪表盘的创建&#xff0c;现在就需要对这些监控方法使用在spring-boot中去。 实现思路&#xff1a; 1、集成Actuator 2、加入Prometheus的依赖 3、配置开放端口、以及开放监控 4、配置Prometheus中的配置…

天马上位在即,将成为iPhoneSE4二级供应商,SE4有望2025年量产

根据知情人士透露&#xff0c;国内OLED面板制造商&#xff0c;如天马&#xff0c;正在积极争取成为苹果iPhone SE 4的AMOLED面板供应商。 苹果面板采购负责人已经在今年上半年访问了中国大陆的主要柔性AMOLED面板制造商之一&#xff0c;这意味着国内一家OLED面板厂商有望成为iP…

【PCL】激光雷达常用传统感知算法学习

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍常用激光感知算法学习。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…

【已解决】Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

&#x1f389;工作中遇到这样一个需求场景&#xff1a;由于ES数据库中历史数据过多&#xff0c;占用太多的磁盘空间&#xff0c;需要定期地进行清理&#xff0c;在一定程度上可以释放磁盘空间&#xff0c;减轻磁盘空间压力。 &#x1f388;在经过调研之后发现&#xff0c;某服务…

9.2.2Socket(TCP)

一.过程: 1.建立连接(不是握手),虽然内核中的连接有很多,但是在应用程序中,要一个一个处理. 2. 获取任务:使用ServerSocket.accept()方法,作用是把内核中的连接获取到应用程序中,这个过程类似于生产者消费者模型. 3. 使用缓冲的时候,注意全缓冲和行缓冲. 4.注意关闭文件资源…

从零实战SLAM-第二课(SLAM中的基础数学)

空间数据的表达方式&#xff1a;点和向量两种形式。 向量的内积&#xff0c;也叫做点乘&#xff0c;是逐点相乘后累加&#xff0c;最终结果是一个标量&#xff0c;物理意义是一个向量在另一个向量上的投影。 外积&#xff0c;也叫做叉乘&#xff0c;两个向量拼起来成&#xff0…

maven是什么?安装+配置

目录 1.什么是maven&#xff1f; 1.2.maven的核心功能是什么&#xff1f; 2.Maven安装配置 2.1Maven的安装 2.2Maven环境配置 1.配置 MAVEN_HOME &#xff0c;变量值就是你的 maven 安装的路径&#xff08;bin 目录之前一级目录&#xff09; 2.将MAVEN_HOME 添加到Path系…

汽车上的电源模式详解

① 一般根据钥匙孔开关的位置来确定整车用电类别&#xff0c;汽车上电源可以分为常电&#xff0c;IG电&#xff0c;ACC电 1&#xff09;常电。常电表示蓄电池和发电机输出直接供电&#xff0c;即使点火开关在OFF档时&#xff0c;也有电量供应。一般来讲模块的记忆电源及需要在车…