JS编程中开关灯效果如何实现

来源：爱站网时间：2022-10-20编辑：网友分享

小编今天来给大家分享下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>

总结

以上关于JS编程中开关灯效果如何实现的详细内容，不知道各位朋友都看明白了吗！想要了解更多不同类型的技术文章内容，来爱站技术频道网站吧！里面的文章应有尽有。