前端代码之2D教室

昕冉2025-01-03 17:19

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

一、页面结构搭建

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

二、页面样式设计

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

当然，页面样式调整有大量重复值的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定义类的方式，构造两个函数即总闸开和总闸关，用于管理灯和风扇的状态。是代码根据模块化的特征，便于维护和管理。

js 复制代码

class 灯光{
    constructor(){

        this.排灯状态=[false,false,false,false]
        this.风扇状态=[false,false,false]

        this.总开关状态=false

        this.灯组 = []
        this.风扇 = []
    }
    
    总闸开(状态,物体组,样式){
        //
        物体组.forEach((item,index)=>{
            // 当是灯对象时
            if( 状态[index] ){

                if(状态 == this.排灯状态){
                    item.classList.add(样式)

                }else if(状态 == this.风扇状态 ){
                    item.children[0].classList.add('rotate-fan')
                    item.children[1].classList.add('rotate-fan')
                }
            }
        })
    }

    总闸关(){
        this.灯组.forEach((item,index)=>{
            item.classList.remove("white-light")
        })
        // 风对象时因为动画是给fan的两个子类删除
        this.风扇.forEach((item,index)=>{
            item.children[0].classList.remove('rotate-fan')
            item.children[1].classList.remove('rotate-fan')
        })
    }

    风扇转(index){
        this.风扇[index].children[0].classList.toggle('rotate-fan')
        this.风扇[index].children[1].classList.toggle('rotate-fan')
    }

}

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

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

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