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 30 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
浅谈node的事件机制
Oct 09 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
浅谈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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript版代码高亮
2006/06/26 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
img标签中onerror用法
2009/08/13 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python 串口读写的实现方法
2019/06/12 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
平面设计的岗位职责
2013/11/08 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
小学语文业务学习材料
2014/06/02 职场文书
家长学校培训材料
2014/08/20 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
挂职个人工作总结
2015/03/05 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python