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 12 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JS hashMap实例详解
May 26 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
3种vue组件的书写形式
Nov 29 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
JS实现的自定义map方法示例
May 17 Javascript
详解vue高级特性
Jun 09 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列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
微信小程序排坑指南详解
2018/05/23 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python如何实现文本转语音
2016/08/08 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
应聘护士自荐信
2013/10/21 职场文书
美德好少年事迹材料
2014/01/19 职场文书
公司捐款倡议书
2014/05/14 职场文书
师范生求职信
2014/06/14 职场文书
高中社区服务活动报告
2015/02/05 职场文书
写给老婆的保证书
2015/02/27 职场文书
法院执行局工作总结
2015/08/11 职场文书
母亲节主题班会
2015/08/14 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android