简易的网站模板,本地企业网站建设模板,做网站内链什么意思,嵌入式软件开发面试一、背景
想实现一个开关的按钮#xff0c;来触发一些操作#xff0c;网上找了总感觉看着别扭#xff0c;忽然想到iphone的开关挺好#xff0c;搞一个
二、代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8来触发一些操作网上找了总感觉看着别扭忽然想到iphone的开关挺好搞一个
二、代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title开关按钮/titlestyle.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
divlabel classswitchinput typecheckbox idmySwitch onchangeupdateStatus()span classslider round/span/label
/div
scriptfunction updateStatus() {let switchStatus document.getElementById(mySwitch).checked;if (switchStatus) {console.log(已开启);} else {console.log(已关闭);}}
/script
/body
/html效果
关闭 开启
