前端代码之2D教室

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

一、页面结构搭建

简易的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语句就成为了代码简洁明了的不二之选。

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

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

相关推荐
某公司摸鱼前端26 分钟前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
清幽竹客1 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8881 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui