本文已参与「新人创作礼」活动，一起开启掘金创作之路。
JavaScript开关灯小案例
1.效果
2.代码
<button id="btn">关灯</button>
<script>
var bodys = document.body;
var btn =document.querySelector('#btn');
var flag = 0;
btn.onclick =function(){
if(flag == 1){
bodys.style.backgroundColor = 'black';
btn.innerHTML = '开灯';
flag = 0;
}else{
bodys.style.backgroundColor = 'white';
btn.innerHTML = '关灯';
flag = 1;
}
}
</script>
3.解释
- var bodys = document.body;
var btn =document.querySelector('#btn');
①获取body元素并赋值给bodys
②根据指定选择器返回第一个元素对象也就是并赋值给btn - var flag = 0; 定义一个变量flag来记录此时处于开灯状态还是关灯状态（0对应着开灯状态，1对应着关灯状态）
- btn.onclick = 函数
onclick表示鼠标点击左键触发。这里表示点击btn（也就是按钮）会触发方法。 - btn.onclick = function(){ //函数体 }
是函数表达式（匿名函数） - 函数体内代码分析
①if(flag == 1){ //代码块一 }else{ //代码块二 }
若flag等于1的条件成立则执行代码块一的，否则执行代码块二的内容。 - bodys.style.backgroundColor = 'black';
style是样式
backgroundColor = 'black'; 属性设置bodys元素的背景颜色为黑色（也就是关灯的状态）。 - btn.innerHTML = '开灯';
innerHTML可以读取或者写入标签包裹的内容（把按钮中的文字改为开灯）。 - flag = 0;和flag = 1;
目的是实现鼠标每次点击按钮，flag的值在不断切换。从而实现if内代码和else内代码的不断切换。
4.总结
涉及到的知识点
- DOM获取元素
- 函数的使用
- 鼠标点击事件
- if分支结构
- DOM innerHTML 属性
- Style backgroundColor 属性
