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遍历节点的方法小集
Jan 22 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 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 命令行参数详解及应用
2011/05/18 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
js实现分割上传大文件
2016/03/09 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
javascript简易画板开发
2020/04/12 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python类的继承和多态代码详解
2017/12/27 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python字典的值可以修改吗
2020/06/29 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
英文自荐信
2013/12/15 职场文书
法制教育演讲稿
2014/09/10 职场文书
查摆剖析材料范文
2014/09/30 职场文书
募捐感谢信
2015/01/22 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
大学军训决心书
2015/02/05 职场文书
家属慰问信
2015/02/14 职场文书
Redis基本数据类型String常用操作命令
2022/06/01 Redis
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js