前端代码之2D教室

利用前端关键三要素，尝试实现对教室设备的了解控制，得到了这样一个教室控制面板。

一、页面结构搭建

简易的HTML框架搭建各部分的组成部分，为接下来的动态交互打下基础。

二、页面样式设计

前端样式设计即是利用CSS对页面进行设计和调整。

当然，页面样式调整有大量重复值的CSS代码，此时利用CSS变量存储特定的值并进行多方利用。 以下便是CSS变量的用法事例。

:root {
    --active-color:#FF0000;
    --light-color:#FFFF00;
    --up-color: #FFFFFF;
    --lightdiv-color:#F1E4A2;
}
.active {
    background-color: var(--active-color);
}
.white-light {
    background-color: var(--light-color);
}
.up {
    background-color: var(--up-color);
}
.light div{
    background-color: var(--lightdiv-color);
}

三、页面动态效果实现

教室控制面板通过电闸对灯和风扇进行控制。

使用class定义类的方式，构造两个函数即总闸开和总闸关，用于管理灯和风扇的状态。便于函数不断重复利用，是代码根据模块化的特征，便于维护和管理。

其次，在不同电闸拥有不同的状态时，利用switch...case语句就成为了代码简洁明了的不二之选。

接下来分别创建函数对总闸、灯管以及风扇进行动态效果的实现，总闸是灯管和风扇状态改变的大前提，巧妙运用布尔值将每一个电闸不同的状态提取出来，使之得以区分。

以上便是该项目的全部内容。