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为a标签的href赋值实现代码
May 03 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue实现Excel文件的上传与下载功能的两种方式
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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
利用PHP创建动态图像
2006/10/09 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python实现把数字转换成中文
2015/06/29 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python zip函数打包元素实例解析
2019/12/11 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python调用百度API实现人脸识别
2020/11/17 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
暑期工社会实践报告
2015/07/13 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫