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实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
javascript实现计算器功能
Mar 30 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
JavaScript中的宏任务和微任务详情
Nov 27 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 如何向 MySQL 发送数据
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
vue实现放大镜效果
2020/09/17 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
护理学毕业生自荐信
2013/10/02 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
卖房协议书样本
2014/10/30 职场文书
讲座通知范文
2015/04/23 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2015中学教学工作总结
2015/07/22 职场文书