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 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
BootStrap中
Dec 10 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
javascript的内存管理详解
2013/08/07 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
js模块加载方式浅析
2017/08/12 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python 实现两个npy档案合并
2020/07/01 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
全球度假村:Club Med
2017/11/27 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
百度吧主申请感言
2014/01/12 职场文书
表扬信格式
2014/01/12 职场文书
清扬洗发水广告词
2014/03/14 职场文书
物流专业自荐信
2014/05/23 职场文书
实验室标语
2014/06/21 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
法律讲堂观后感
2015/06/11 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android