开关灯
程序员文章站
2024-03-18 21:58:34
...
原理：1、通过JS获取元素的方式来获取按钮元素和body元素，为按钮绑定点击事件click。
2、当触发点击事件后，通过body元素.className为body添加对应的类名，并且修改按钮对应的value值或者其innerHTML。
3、修改对应的值可通过三目运算符，也可以通过if...else。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.on{
background-color: #ffffff;
}
.off{
background-color: gray;
}
</style>
</head>
<body class="on">
<button id="but">关灯</button>
<script>
//获取按钮
let body = document.querySelector("body")
let but = document.querySelector("#but")
but.onclick = function(){
let classname = body.className === "on"?"off":"on"
let innerHTML = this.innerHTML === "关灯"?"开灯":"关灯"
body.className = classname
this.innerHTML = innerHTML
}
</script>
</body>
</html>这只是简单的开关灯，也没有进行页面布局。
上一篇： 本以为是分治法 谁知道