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中的对象和数组的应用技巧
Jan 07 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
JavaScript错误处理
Feb 03 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
Webpack的dll功能使用
Jun 28 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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实现分页工具类分享
2014/01/09 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php给图片加文字水印
2015/07/31 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
关于js datetime的那点事
2011/11/15 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
详解python开发环境搭建
2016/12/16 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
常用的10个Python实用小技巧
2020/08/10 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
最新创业融资计划书
2014/01/19 职场文书
大学生励志演讲稿
2014/04/25 职场文书
学习退步检讨书
2014/09/28 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
学期个人工作总结
2015/02/13 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android