用html页面制作开关,利用前端基础制作html开关图标
我们先来看下效果图:
(学习视频分享:html视频教程)
html代码:
开关图标
ON
OFF
css样式:
body {
text-align: center
}
.SwitchIcon {
margin: 200px auto;
}
#toggle-button {
display: none;
}
.button-label {
position: relative;
display: inline-block;
width: 80px;
height: 30px;
background-color: #ccc;
box-shadow: #ccc 0px 0px 0px 2px;
border-radius: 30px;
overflow: hidden;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
}
.button-label .text {
line-height: 30px;
font-size: 18px;
text-shadow: 0 0 2px #ddd;
}
.on {
color: #fff;
display: none;
text-indent: -45px;
}
.off {
color: #fff;
display: inline-block;
text-indent: 34px;
}
.button-label .circle {
left: 0;
transition: all 0.3s;
}
#toggle-button:checked + label.button-label .circle {
left: 50px;
}
#toggle-button:checked + label.button-label .on {
display: inline-block;
}
#toggle-button:checked + label.button-label .off {
display: none;
}
#toggle-button:checked + label.button-label {
background-color: #19e236;
}
.div {
height: 20px;
width: 30px;
background: #51ccee;
}
js逻辑:
//窗体加载
window.onload = function () {
var onoffswitch = document.getElementById("toggle-button");
onoffswitch.checked = true;
}
//测试开始
function SwitchClick() {
var onoffswitch = document.getElementById("toggle-button");
var label = document.getElementById("batteryIconContent");
if (onoffswitch.checked) {
//调用后台
}
else {
//调用后台
}
}
用html页面制作开关,利用前端基础制作html开关图标相关推荐
- php制作404,利用thinkphp怎么制作一个404跳转页面
利用thinkphp怎么制作一个404跳转页面 发布时间:2020-12-14 15:46:55 来源:亿速云 阅读:97 作者:Leah 本篇文章给大家分享的是有关利用thinkphp怎么制作一个4 ...
- html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面 发布时间:2020-12-19 14:02:09 来源:亿速云 阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
- html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
- 计算机二级word邀请函制作步骤,利用邮件合并制作邀请函(2)
第一篇计算机应用基础6 第1章 计算机基础知识6 1.1 概述6 1.1.1计算机的发展6 1.1.2计算机的特点.用途和分类6 1.1.3计算科学研究与应用7 1.1.4未来计算机的发展趋势7 ...
- html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- 网页游戏制作html5,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- 怎么使用php制作课程表,利用WPS表格制作课程表全攻略
在文档中插入表格或者用文字工具制作表格都是我们在工作中经常遇到的问题.如果表格的格式稍微复杂一些,为了调整表格的各项格式,我们将不得不在各个菜单和对话框中切换,使得工作量大大增加.但在WPS Offi ...
- 用DIV+CSS技术设计的餐饮美食网页与实现制作(web前端网页制作课作业)HTML+CSS+JavaScript美食汇响应式美食菜谱网站模板
- 使用DIV+CSS技术设计的非遗文化网页与实现制作(web前端网页制作课作业)
最新文章
- 阿里巴巴代码规范-note
- python执行shell脚本报错_在python中执行shell命令:字符串错误
- 从集合大小的定义到数学结构-解决了多年的疑惑
- 图解项目研发流程与制度实例
- win10照片背景黑色改为白色
- 思科模拟器5506防火墙配置_企业办公网络配置不求人之二
- 腾讯微信被怼,iOS版微信不能打赏了
- U盘无法格式化(提示U盘文件系统变为了RAW格式)【一般应用】
- Python爬取豆瓣高分图书TOP100存入Excel
- Elasticsearch-head-master配置 (与es连接)
- 【java】中文转拼音遇到的奇葩事件
- docker第二节点无法启动报错xtrabackup_checkpoints missing. xtrabackup/SST failed on DONOR. Check DONOR log解决方案
- 如何查看网页操作中调用的js方法
- 银行定期存款利率,输入金额,输入年限,计算本息总额
- 网络安全--入侵攻击类型
- JS开发HTML5游戏《神奇的六边形》(七)
- 每秒解析千兆字节的JSON解析器开源,秒杀一大波解析器!
- VirtualBox安装Mac系统
- Jmeter并发压测-自定义不同请求参数
- android购票日历,人生日历抢票软件使用教程:人生日历抢票成功技巧
热门文章
- centos 的php5.3.3 升级5.5.3
- 老李分享知识:性能测试之TPS和吞吐率
- 终于找到了。 图标搜索、UI设计、移动开发集中导航
- 口译务实——unit10 II
- sql中带in条件的查询及提高效率
- java通过证书获取CN_java – 从证书DN解析CN [重复]
- 接口访问次数_如何基于spring开发自定义注解实现对接口访问频次限制?
- linux格式化nfs,NFS协议详解与配置实现
- pdnovel.php_Pdnovel 在線閱讀體驗
- 敏捷开发与测试(面试话题之一)