今天，我自己复习了JavaScript的相关知识，包括循环、函数、dom操作、事件等内容。
循环主要包括while循环、dowhile循环和for循环，具体的内容如下：
这三种循环方式的区别是：while循环先执行（i<5）中的内容，若条件不满足就不执行，最少执行0次；
dowhile循环先执行"{}"花括号中的内容，再判断是否满足while的条件，若不满足，则只执行且最少执行1次；
for循环则是将多个条件套在一起，一起执行。
函数主要用function来表示，定义方法为function 函数名称(){}，分为含参、不含参以及返回值函数
当然，函数的返回值要有一个元素来获取，否则控制台上不显示。
dom操作主要分为获取元素、修改内容、修改样式与修改属性，具体作用如下图所示：
事件则分为内部事件与监听事件，内部事件是后面的会覆盖前面的内容，因此不能绑定多个；而监听事件却可以
利用所学内容，我制作了一个发亮的灯泡：
它分为两个部分：一个是上面的灯泡，另一个是下面的滚动按钮，先将这些图形做出来，将这两个部分都放在div中，整体的body背景颜色设置为黑色，再设置合适的宽度与高度，利用父相子绝知识，将灰色的矩形置于椭圆的下方，将它们切好圆角；将按钮部分利用margin:0px auto居中，再利用2d转换将位置调整到图中那里。这些都涉及CSS的内容。
而重头戏有两个：一个是点击白色按钮，让白色按钮从左边匀速滚动到右边；一个是当按钮在右边时，灯泡会发光。先获取两个要改变的变量(本着谁变就获取谁的原则)，再用监听点击addEventListener，点击一下，这个按钮从left:0px变到left:100px，随即灯发光，而再点一下，变回left:0px,用classList.toggle来实现。
至于发光，则用box-shadow来实现，注意是匀速，就在按钮"radio"那里搞一个transition:all 1s;即可。具体代码如下：
Document
body {
background-color: black;
}
.box1 {
width: 400px;
height: 500px;
background-color: white;
margin: 0px auto;
transform: translateY(100px);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
position: relative;
transition: all 0.5s;
}
.box1::before {
/* 这个content:""必须有，否则这个灰色的长方形出不来 */
content: "";
width: 200px;
height: 100px;
background-color: rgb(105, 103, 103);
position: absolute;
bottom: -90px;
left: 50%;
transform: translateX(-50%);
border-radius: 20px;
}
.button {
width: 150px;
height: 50px;
background-color: rgb(99, 95, 95);
margin: 0px auto;
transform: translateY(250px);
border-radius: 30px;
position: relative;
}
.radio{
width: 50px;
height: 50px;
background-color: white;
/* 变圆 */
border-radius: 50%;
position: absolute;
left: 0px;
transition: all 1s;
}
.selected{
left: 100px;
}
.light{
box-shadow: 0px 0px 360px 200px yellow;
}
</style>
<script>
let box1= document.querySelector(".box1")
let radio = document.querySelector(".radio");
radio.addEventListener("click",function(){
radio.classList.toggle("selected")
box1.classList.toggle("light")
})
</script>
至此，一个发光的灯泡就完成了。
