这篇工作记录讲述了在实际项目中应用gauge.js插件来展示仪表盘的过程。需求是显示多个房间的温度和湿度，通过在HTML中预先布局并抽离CSS，然后在JavaScript中动态获取数据并循环生成内容。作者封装了一个方法，传入值和ID即可创建温度计，并分享了在项目中学习到的知识和经验，包括HTML标签属性、CSS抽象以及知识的融合。推荐了一个将HTML转为JS字符串的小工具。
在北京工作的过程中用到了gauge.js这个插件，它主要是用作仪表盘的展示，在我们的项目中有一个页面是监测屋内温度和湿度的变化，用到了这个插件，需求是从数据库中查出来有几个屋子，然后动态的显示每个屋的温湿度情况。
先说一下思路，首先在页面上写死，完成一个屋子的排版，并抽出css，然后在js中拿到数据，循环拼接页面，搞定，直接上代码~
html：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>实时数据</title>
<link rel="stylesheet" href="/Content/easyui.css">
<link rel="stylesheet" href="/Content/icon.css">
<link href="/Content/EnvironmentMonitor/EnvironMonitor_RealTime.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/Scripts/EnvironmentalMonitoring/RealTimeData/gauge.js"></script
最低0.47元/天 解锁文章
扫一扫
1744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
