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

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

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

相关推荐
dreams_dream23 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼44 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
周小码1 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
前端小巷子2 小时前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia2 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
Mintopia2 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
一枚前端小能手2 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖2 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号2 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js