不能插入mp4格式，这里我们简单描述一下，需要做的效果
页面中有一个按钮，通过点击按钮，改变body的背景颜色。这里用红色替代了白色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开关灯小案例</title>
<!-- IMPORT CSS -->
<style>
html,
body {
height: 100%;
overflow: hidden;
}
button {
padding: 0 20px;
line-height: 35px;
}
</style>
</head>
<body style="background-color: white;">
<button id="lampBtn">关灯</button>
<!-- IMPORT JS -->
<script>
/*
* 要实现的思路和功能
* 1.默认页面是白色的（开灯状态），按钮显示的文字是关灯
* 2.点击按钮
* 1）获取当前开关灯的状态（看BODY的背景颜色）
* 2）如果当前是开灯状态（BODY的背景颜色是白色），我们让BODY背景
* 颜色变为黑色（关灯状态），按钮中显示开灯
* 3）如果当前是关灯状态（BODY的背景颜色是黑色），我们让BODY背景
* 颜色变为白色（开灯状态），按钮中显示关灯
*/
// 1.想要操作谁就先获取谁 BODY和按钮
let lampBtn = document.getElementById('lampBtn'); //=>获取按钮
let body = document.body; //=>获取BODY
// 2.事件绑定：点击按钮的时候做什么事情
lampBtn.onclick = function () {
/* 元素.style.xxx=xxx：设置元素的行内样式，元素.style.xxx 不赋值的情况下是获取元素的行内样式（注意是行内样式：不管在哪设置的样式，只要不是在行内上设置，都获取不到） */
// 获取BODY的背景颜色
let bg = body.style.backgroundColor;
if (bg === 'white') {
// 当前处于开灯状态
body.style.backgroundColor = "black";
lampBtn.innerText = "开灯";
} else {
// 当前处于关灯状态
body.style.backgroundColor = "white";
lampBtn.innerText = "关灯";
}
};
</script>
</body>
</html>
