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

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

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

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce8 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop10 小时前
05-ES6
前端·javascript·es6
Heo10 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端