JavaScript实现开关等效果
更新时间：2017年09月08日 11:42:13 作者：ruirui_1996
本文给大家分享一段简单的代码基于js实现开关灯效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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实现开关等效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
大家一定遇到过这样的情况，有两个日期对象，然后需要判断他们是否相等，下面来说下判断的方法2013-09-09
在开发中遇到需要在打开窗口的同时给父窗口添加遮罩防止用户误操作，而在窗口关闭时需要去掉父窗口的遮罩以便用户操作。所以可以利用setInterval()来周期性的检测打开的窗口是否关闭2017-06-06
Javascript函数中的参数对象arguments是个对象，而不是数组。但它可以类似数组那样通过数字下表访问其中的元素，而且它也有length属性标识它的元素的个数。2015-06-06
IE浏览器不支持getElementsByClassName的解决方法
这篇文章主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了jfinal与bootstrap的登出实战，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题，需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
前端接口报错Required request body is missing解决办法
这篇文章主要给大家介绍了关于前端接口报错Required request body is missing的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
今天在HTML中引入JavaScript文件运行时，alert弹出的提示框中文显示为乱码，怎么解决此问题呢？下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法，一起看看吧2017-09-09
最新评论