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 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
Ionic快速安装教程
Jun 03 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
javascript实现弹出层效果
Dec 10 Javascript
three.js 如何制作魔方
Jul 31 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php 操作符与控制结构
2012/03/07 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python 字符串定义
2009/09/25 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python九九乘法表的实例
2017/09/26 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python模块的加载讲解
2019/01/15 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
精细化工应届生求职信
2013/11/17 职场文书
便利店的创业计划书
2014/01/15 职场文书
学校安全责任书
2014/04/14 职场文书
公司投资建议书
2014/05/16 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python