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 相关文章推荐
js跨域访问示例(客户端/服务端)
May 19 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
window.open()弹出居中的窗口
2007/02/01 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
nodejs实现简单的gulp打包
2017/12/21 NodeJs
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
angular多语言配置详解
2019/05/16 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
委托书格式
2014/08/01 职场文书
英语教师个人总结
2015/02/09 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript