当前位置: 首页 > news >正文

项目(智慧教室)第四部分,页面交互功能

一。页面构思

1.标题栏

        大标题:智慧教室管理系统

        小标题:灯光,报警,风扇,温度,湿度,光照

2.样式设计

        背景设置。字体设置(字体大小,格式,颜色)

3.导航栏

        6个导航栏标签:3个传感器,3个控制

        每次点击导航栏标签:页面对应做出页面展示。

4.前后台交互设计

        1.定时刷新传感器设置(当用户点击传感器标签,需要把数据展示给用户)

        2.控制下发(当用户点击控制标签,需要根据用户下发的命令进行控制实际的硬件,并且在主题栏进行动态展示)

二。前端开发基本技能

1.html

主要内容:html(最外边),head(页面头),body(页面身)标签

        

2.CSS--》静态页面的样式

        对不同区域的资源设置样式(body,header,h1区域的样式设计)

3.javaScript(js)

        动图设计,

常用的网页:jQuery,有很多现成的页面资源可以使用。

        jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

开发方式:

1.BootStrap(基于框架的开发)

Bootstrap中文网

2.Vue(渐进式js框架)

Vue.js - 渐进式 JavaScript 框架 | Vue.js

3.react(现成的框架)

React 官方中文文档

本项目运用到的技术:js,css(了解即可)

三。Web页面布局

1.标题栏布局

(1)页面展示

具体代码

headr,h1的样式在上面CSS中有定义。

(2)small是小字体

    <div class="header"><div class="content"><h1>智慧教室管理系统<small>温度、湿度、风扇、报警,光照</small></h1></div></div>

2.导航栏布局

(1)页面展示

(2)具体代码

<div class="body-left"><img src="images/left-title.png" style="margin:26px 0;"><div><ul class="left-nav"><li class="line active"><a href="#title1" data-toggle="tab"><img src="images/tubiao01.png" width="40px">温度传感器</a></li><li class="line"><a href="#title2" data-toggle="tab"><img src="images/tubiao02.png" width="40px">湿度传感器</a></li><li class="line"><a href="#title3" data-toggle="tab"><img src="images/tubiao03.png" width="40px">光照传感器</a></li><li class="line"><a href="#title4" data-toggle="tab"><img src="images/tubiao04.png" width="40px">LED</a></li><li class="line"><a href="#title5" data-toggle="tab"><img src="images/tubiao05.png" width="38px">风扇</a></li><li class="line"><a href="#title6" data-toggle="tab"><img src="images/tubiao06.png" width="40px">报警器</a></li></ul><div class="content"><div class="box fade in active" id="title1"><p>温度值<br /><span><lable id="temperature"></lable></span></p></div><div class="box fade" id="title2"><p>湿度值<br /><span><lable id="humidity"></lable></span></p></div><div class="box fade" id="title3"><p>光照值<br /><span><lable id="light"></lable></span></p></div><div class="box fade" id="title4"><h3>开关</h3><img id="button01" src="images/an-off.png" onclick="anniu01()" /></div><div class="box fade" id="title5"><h3>开关</h3><img id="button02" src="images/an-off.png" onclick="anniu02()" /></div><div class="box fade" id="title6"><h3>开关</h3><img id="button03" src="images/an-off.png" onclick="anniu03()" /></div></div></div>

相关文章:

项目(智慧教室)第四部分,页面交互功能

一。页面构思 1.标题栏 大标题&#xff1a;智慧教室管理系统 小标题&#xff1a;灯光&#xff0c;报警&#xff0c;风扇&#xff0c;温度&#xff0c;湿度&#xff0c;光照 2.样式设计 背景设置。字体设置&#xff08;字体大小&#xff0c;格式&#xff0c;颜色&#xff09; 3.…...

基于Matlab分析的电力系统可视化研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

MySQL为什么不推荐使用in

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 当使用IN语句时&#xff0c;MySQL可能会遇到以下问题&#xff1a; 索引问题&#xff1a;MySQL使用索引来加速查询&#x…...

python中的复数

在Python中&#xff0c;复数&#xff08;Complex Numbers&#xff09;是一种数值类型&#xff0c;用于表示具有实部和虚部的数值。复数由一个实部和一个虚部组成&#xff0c;形式为 a bj&#xff0c;其中 a 表示实部&#xff0c;b 表示虚部&#xff0c;而 j 表示虚数单位&…...

Lua02——应用场景及环境安装

应用场景 是当今游戏领域使用最广泛的脚本语言之一。 搭配 OpenResty 使用&#xff0c;可以扩展Nginx服务器的功能&#xff0c;使用者仅需要编写Lua代码就能轻松完成业务逻辑。 与 Redis 结合。 Adobe Photoshop Lightroom 搭配 Lua 编写插件。 与游戏结合&#xff1a; C/…...

基于Springcloud的基础框架,统一gateWay网关鉴权demo,附下载地址

基于Springcloud的基础框架&#xff0c;统一gateWay网关鉴权demo&#xff0c;附下载地址 使用方式&#xff1a; 1、搭建nacos环境&#xff0c;修改对应nacos地址 2、修改mysql地址,导入sql语句 ###框架内容 SpringcloudGatewayJWTNacosFeginmysqlMybatis plus 具体功能 基于…...

算法训练day34|贪心算法 part03(LeetCode 1005.K次取反后最大化的数组和、134. 加油站、135. 分发糖果(处理一边再处理一边))

文章目录 1005.K次取反后最大化的数组和思路分析代码实现 134. 加油站暴力方法贪心方法 135. 分发糖果(处理一边再处理一边)思路分析代码实现思考总结 1005.K次取反后最大化的数组和 题目链接&#x1f525; 给定一个整数数组 A&#xff0c;我们只能用以下方法修改该数组&#…...

插入排序和冒泡排序

文章目录 1、插入排序2、冒泡排序 1、插入排序 流程如下&#xff1a; 1&#xff09;从第一个元素开始遍历&#xff0c;该元素可以认为已经被排序&#xff0c;记录已排序序列的结尾元素为end i 2&#xff09;取下一个元素temp arr[end 1]&#xff0c;从已排序的元素序列从后…...

go Session的实现(一)

〇、前言 众所周知&#xff0c;http协议是无状态的&#xff0c;这对于服务器确认是哪一个客户端在发请求是不可能的&#xff0c;因此为了能确认到&#xff0c;通常方法是让客户端发送请求时带上身份信息。容易想到的方法就是客户端在提交信息时&#xff0c;带上自己的账户和密…...

QTableView合并单元格

QtableView的功能 QTableView是Qt框架提供的用于显示表格数据的类。它是基于MVC&#xff08;模型-视图-控制器&#xff09;设计模式的一部分&#xff0c;用于将数据模型和界面视图分离。 以下是一些QTableView的主要特点和功能&#xff1a; 1. 显示表格数据&#xff1a; QTa…...

如何使用SpringCloud Eureka 创建单机Eureka Server-注册中心

&#x1f600;前言 本篇博文是关于使用SpringCloud Eureka 创建单机Eureka Server-注册中心&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&…...

QT连接OpenCV库实现人脸识别

一、关于图像处理的相关类和函数 图像容器&#xff1a;Mat类 读取图像&#xff1a; Mat imread( const String& filename, int flags IMREAD_COLOR ); 功能&#xff1a;读取出图像 参数&#xff1a;图像路径 返回值&#xff1a;读取的图像 命名展示图像的窗口&#xff…...

基于SSM+Vue的网上花店系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

两种解法解决 LeetCode 27. 移除元素【C++】

移除元素 27. 移除元素题目&#xff1a;[移除元素](https://leetcode.cn/problems/remove-element/description/)示例和提示&#xff1a;解法&#xff1a;1. 暴力解法 2. 快慢指针 27. 移除元素 题目&#xff1a;移除元素 示例和提示&#xff1a; 解法&#xff1a; 1. 暴力解…...

Vue + Element UI 前端篇(七):功能组件封装

组件封装 为了避免组件代码的臃肿&#xff0c;这里对主要的功能部件进行封装&#xff0c;保证代码的模块化和简洁度。 组件结构 组件封装重构后&#xff0c;试图组件结构如下图所示 代码一览 Home组件被简化&#xff0c;包含导航、头部和主内容三个组件。 Home.vue <te…...

QT QToolBox控件使用详解

本文详细的介绍了QToolBox控件的各种操作&#xff0c;例如&#xff1a;新建界面、添加页签、索引设置当前项、获取当前项的索引、获取当前项窗口、获取索引值是int的窗口、移除索引值项、获取项的数量、获取指定索引值、设置索引项是否激活、获取索引值项是否激活、设置项的图标…...

数学建模--主成分分析法(PCA)的Python实现(

目录 1.算法核心思想&#xff1a; 2.算法核心代码&#xff1a; 3.算法分类效果&#xff1a; 1.算法核心思想&#xff1a; 1.设置降维后主成分的数目为2 2.进行数据降维 3.设置main_factors1个划分类型 4.根据组分中的值进行分类 5.绘制出对应的图像 2.算法核心代码&#xff1a…...

【数据结构篇】线性表2 —— 栈和队列

前言&#xff1a;上一篇我们介绍了顺序表和链表 &#xff08;https://blog.csdn.net/iiiiiihuang/article/details/132615465?spm1001.2014.3001.5501&#xff09;&#xff0c; 这一篇我们将介绍栈和队列&#xff0c;栈和队列都是基于顺序表和链表来实现的 目录 栈&#xff…...

万物互联:软件与硬件的协同之道

在当今数字化时代&#xff0c;我们身边的一切似乎都与计算机和互联网有关。从智能手机到智能家居设备&#xff0c;从自动驾驶汽车到工业生产线&#xff0c;无论我们走到哪里&#xff0c;都能看到软件和硬件的协同作用。本文将探讨这种协同作用&#xff0c;解释软件和硬件如何相…...

ping: www.baidu.com: Name or service not known 写了DNS还是不行

环境描述&#xff1a;ESXI平台上&#xff0c;一台Centos7虚拟主机。 问题描述&#xff1a;平台上的其他的虚拟机可以正常ping通&#xff0c;就这台ping IP地址可以通&#xff0c;ping域名解析失败。 排查过程&#xff1a; 1、检查网卡配置文件和/etc/resolv.conf配置文件是否…...

C++中的decltype、std::declval 和 std::decay_t傻傻分不清楚

文章目录 前言它们是什么通俗解释总结 前言 在C中提到推导第一个映入脑海的可能是“模板”&#xff0c;当然有人也可能想到 auto&#xff0c;这些都是和推导相关的语言语法&#xff0c;再比如“完美转发”等等&#xff0c;总是就是他们的类型不用明明白白的写出来&#xff0c;…...

什么是Ubuntu LTS?与常规版本的区别

Ubuntu LTS&#xff08;Long-Term Support&#xff09;是Ubuntu操作系统的一个特殊版本&#xff0c;旨在提供更长时间的支持和稳定性。与常规的Ubuntu版本相比&#xff0c;LTS版本在以下几个方面有所不同&#xff1a; 支持周期更长&#xff1a; 使用Ubuntu LTS版本&#xff0c…...

如何写一个可以找到工作的简历不至于太烂

简历是自己的一个很重要的标签&#xff0c;是获得面试的敲门砖&#xff0c;简历是要时常更新的&#xff0c;否则会错过一些机会。简历也是给自己的正反馈。 方法 ● 模仿&#xff0c;例如Boss&#xff0c;拉钩下面都给你一个案例模板供你参考&#xff0c;但是我觉得其实参考性…...

el-select 使用

案例&#xff1a; /* * label : 界面上展示的是哪个字段,我这里需要展示名称 * value : 绑定的字段&#xff0c;一般是id */<el-selectv-model"Form.BillNumber"placeholder"请选择"change"changeValue($event)"><el-optionv-for"…...

思维导图怎么变成ppt?4个思维导图一键生成ppt的方法

做好的思维导图如何变成一份ppt&#xff1f;本文罗列了4个可行方法&#xff0c;一起来看看吧。 一 直接复制粘贴 这是最简单的方法&#xff0c;虽然这样可能会花费一些时间&#xff0c;但可以确保内容排版和布局与你想要的一致。当然&#xff0c;我们大可使用更高效的方法。…...

3D点云处理:点云投影为2D图像 调平点云(附源码)

文章目录 0. 测试效果1. 基本内容1.1 计算点云位姿1.2 调平点云1.3 点云投影2. 代码实现文章目录:3D视觉个人学习目录微信:dhlddxB站: Non-Stop_0. 测试效果...

mysql 查询优化 、索引失效

查询优化 物理查询优化 通过索引和表连接方式等技术来进行优化&#xff0c;这里重点需要掌握索引的使用 逻辑查询优化 通过SQL 等价变换 提升查询效率&#xff0c;直白一点就是说&#xff0c;换一种查询写法执行效率可能更高 索引失效 计算、函数、类型转换&#xff08;自动或…...

支付宝pc支付(springboot版),简单配置即可实现支付

概述 支付宝pc支付&#xff0c;只需要修改配置就可以实现支付&#xff0c;0基础小白都可以用。使用springboot编写&#xff0c;简单易用。 详细 DEMO简介 springboot整合支付宝pc支付&#xff0c;仅仅需要少量的配置&#xff0c;就可以实现pc支付。 项目截图 支付流程 用户…...

【Redis专题】Redis持久化、主从与哨兵架构详解

目录 前言课程目录一、Redis持久化1.1 RDB快照&#xff08;Snapshot&#xff09;&#xff1a;二进制文件基本介绍开启/关闭方式触发方式bgsave的写时复制&#xff08;COW&#xff0c;Copy On Write&#xff09;机制优缺点 1.2 AOF&#xff08;append-only file&#xff09;&…...

【vue2第十三章】自定义指令 自定义v-loading指令

自定义指令 像 v-html&#xff0c;v-if&#xff0c;v-for都是vue内置指令&#xff0c;而我们也可以封装自定义指令&#xff0c;提升编码效率。 什么是自定义指令&#xff1f; 自己定义的一些指令&#xff0c;可以进行一些dom操作&#xff0c;扩展格外的功能。比如让图片懒加载…...