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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
vue实现在线翻译功能
Sep 27 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python中for循环详解
2014/01/17 Python
python实时监控cpu小工具
2018/06/21 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
小学语文课后反思精选
2014/04/25 职场文书
食品安全处置方案
2014/06/14 职场文书
学校宣传标语
2014/06/18 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS