JavaScript实现开关等效果


Posted in Javascript onSeptember 08, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>开关灯</title>
 <style type="text/css">
  html, body {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
   cursor: pointer;
   background-color: white;
  }
 </style>
</head>
<body id="bodyEle">
<script type="text/javascript">
 var oBody = document.getElementById("bodyEle");
 oBody.onclick = function () {
  var bg = this.style.backgroundColor;
  switch (bg) {
   case "white":
    this.style.backgroundColor = "red";
    break;
   case "red":
    this.style.backgroundColor = "black";
    break;
   default:
    this.style.backgroundColor = "white";
  }

 }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JavaScript实现开关等效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 #Javascript
关于Ajax的原理以及代码封装详解
Sep 08 #Javascript
vue父子组件的嵌套的示例代码
Sep 08 #Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
通过button将form表单的数据提交到action层的实例
Sep 08 #Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 #Javascript
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
splice slice区别
2006/10/09 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
初中班级口号
2014/06/09 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
SQL基础的查询语句
2021/11/11 MySQL
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js