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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
express.js中间件说明详解
Mar 19 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
vue watch监控对象的简单方法示例
Jan 07 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
dedecms模板标签代码官方参考
2007/03/17 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python如何通过protobuf实现rpc
2016/03/06 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python基于requests库爬取网站信息
2020/03/02 Python
关于python 跨域处理方式详解
2020/03/28 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Numpy数组的广播机制的实现
2020/11/03 Python
小学生防溺水广播稿
2014/01/12 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书