实战HTML：根据参数构造动态设备监测列表
2024-05-20 19:06:01
运行结果：
参数类型
点击某个设备之后需要如下信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#devAdmiInfo {border-radius:10px;width: 400px;background-color: #C1C1C1;z-index: 10;position: absolute;left: 30%;bottom: 50px;display: flex;flex-direction: row;justify-content: start;flex-wrap: wrap;align-content: flex-start;}#devAdmiInfo .devInfo {border-radius:5px;position: relative;width: 18%;height: 25px;background-color: #F3F3F3;margin: 7px 4px;cursor: pointer;}#devAdmiInfo .devInfo.select {background-color: palegoldenrod;}#devAdmiInfo .devInfo .devImg {height: 20px;width: 20px;margin-left: 2px;margin-top: 2px;}#devAdmiInfo .devInfo span {color:#000;font-size: 2px;position: absolute;top: 50%;transform: translateY(-50%);padding-left: 5px;}#devAdmiInfo .devInfo .status{display: inline-block;position: absolute;right: 0;top: 5px;font-size: 14px;color: lawngreen;}#devAdmiInfo .devInfo .status.abnormal{color: red;}#perDivInfo {border-radius:10px;z-index: 100;position: absolute;background-color: #F3F3F3;left: 30%;top: 20px;}#perDivInfo p {color:#000000;padding: 0;font-family: 楷体,serif;margin: 10px 20px 10px 10px;}#perDivInfo span {font-size:20px;position: absolute;right: 5px;top: 0;cursor: pointer;color: #000000;}#map3d{height: 300px;width: 300px;position: relative;}</style>
</head>
<body>
<div id="map3d">
</div>
</body>
<script src="jquery.js"></script>
<script>params= {"rows":{"abc1111100":{"status":1,"name":"监测站00","type":"种类0"},"abc1111101":{"status":0,"name":"监测站01","type":"种类0"},"abc1111102":{"status":1,"name":"监测站02","type":"种类0"},"abc1111103":{"status":1,"name":"监测站03","type":"种类0"},"abc1111104":{"status":1,"name":"监测站04","type":"种类0"},"abc1111105":{"status":1,"name":"监测站05","type":"种类0"},"abc1111106":{"status":1,"name":"监测站06","type":"种类1"},"abc1111107":{"status":1,"name":"监测站07","type":"种类1"},"abc1111108":{"status":1,"name":"监测站08","type":"种类1"},"abc1111109":{"status":1,"name":"监测站09","type":"种类1"},"abc1111110":{"status":1,"name":"监测站10","type":"种类1"},"abc1111111":{"status":0,"name":"监测站11","type":"种类2"},"abc1111112":{"status":1,"name":"监测站12","type":"种类2"},"abc1111113":{"status":1,"name":"监测站13","type":"种类3"},"abc1111114":{"status":1,"name":"监测站14","type":"种类3"},"abc1111115":{"status":1,"name":"监测站15","type":"种类4"},"abc1111116":{"status":1,"name":"监测站16","type":"种类5"},"abc1111117":{"status":1,"name":"监测站17","type":"种类6"},"abc1111118":{"status":1,"name":"监测站18","type":"种类7"},"abc1111119":{"status":1,"name":"监测站19","type":"种类8"}}};itemInfo ={"lastTime":"20190812","lastInfo":"111111"};let $devAdmiInfo = $('<div></div>');let $map3d = $('#map3d');$devAdmiInfo.attr('id', 'devAdmiInfo');$devAdmiInfo.attr('class', 'devAdmiInfo');$.each(params.rows,function (index,value) {let $devInfo,$devSpan;if (value.status === 0) {$devInfo = $(`<div class="devInfo select" code="${index}"></div>`);$devSpan = $(`<span>${value.name}</span><span id="status" class='status abnormal'>●</span>`);} else {$devInfo = $(`<div class="devInfo" code="${index}"></div>`);$devSpan = $(`<span>${value.name}</span><span id="status" class='status'>●</span>`);}let $devImg = $(`<img class="devImg" alt="${value.name}">`);$devImg.attr('src', 'img/user.jpg');$devInfo.append($devImg);$devInfo.append($devSpan);$devInfo.click(function () {if( $('#perDivInfo').length!==0){$('#perDivInfo').remove();}// 获取设备编号let $devCode = $(this)[0].getAttribute('code');let $perDivInfo = $(`<div id="perDivInfo"><p>设备编号:$devCode</p><p>最新时间:${itemInfo.lastTime}</p><p>最新时间:${itemInfo.lastInfo}</p><span id="devPerInfoClose">×</span></div>`)$devAdmiInfo.append($perDivInfo);$('#devPerInfoClose').click(function () {$('#perDivInfo').remove();});});$devAdmiInfo.append($devInfo);});$map3d.append($devAdmiInfo);
</script>
</html>
实战HTML：根据参数构造动态设备监测列表相关推荐
- SSM+工业关键设备监测运维系统 毕业设计-附源码191400
ssm工业关键设备监测运维系统 摘 要 随着社会的发展,社会的方方面面都在利用信息化时代的优势.互联网的优势和普及使得各种系统的开发成为必需. 本文以实际运用为开发背景,运用软件工程原理和开发方法,它 ...
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
前言 在 [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇中,有介绍到如何动态添加一列 -- 设置新columns 后调用reconfigure 方法. 这里来承接这一篇 ...
- FORCAL参数优化动态库FcOpt
欢迎访问 Forcal程序设计 FORCAL参数优化动态库FcOpt V1.0 目 录 1 什么是FcOpt 2 Forcal参数优化函数 fcopt::Opt 求无约束条件下的n维极小值 优化能力一 ...
- 抗击洪涝灾害，河道水雨情动态在线监测解决方案
一.项目背景 我国是个多山的国家且位于东南季风区,降雨分布广泛还分布不均匀,这样一来使汛期高度集中.导致很多沿海城市以及临近河道的地区面临着河道决堤的威胁 如何实时监测河道雨水情动态成了让人头疼的问题 ...
- python动态参数_python动态参数
Python的动态参数有两种,分别是*args和**kwargs,这里面的关键是一个和两个星号的区别,而不是args和kwargs在名字上的区别,实际上你可以使用*any或**whatever的方式. ...
- 海域动态监视监测管理系统_监视和管理备份系统
海域动态监视监测管理系统 上一次我们建立一个强大的备份系统时 ,现在我们将研究如何监视备份集. 我们需要验证是否正确清理了备份集(这称为删除策略),并且它们是一致的(称为一致性策略). 备份集可以包含 ...
- 动态内存的分配用法和构造动态一维数组
int * pArr; pArr = (int *)malloc(4 * length); 相当于 构造了这样一个数组 int pArr[length]; #include <stdio. ...
- c语言链表错误,C语言创建链表错误之通过指针参数申请动态内存实例分析
本文实例讲述了C语言创建链表中经典错误的通过指针参数申请动态内存,分享给大家供大家参考之用.具体实例如下: #include #include // 用malloc要包含这个头文件 typedef s ...
- php查询sqlserver2008r2,php根据请求参数ODBC动态连接SQL Server2008R2
使用场景: 1.要使用php连接SQL Server2008R2 2.要根据传入的参数来动态的切换数据库 //查询sql Server所有的数据库名 //SELECT Name FROM Master ...
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
前言 延续: [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇. 在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式.归纳一下思路就是: 先显示,后隐藏. 当 ...
最新文章
- Linux驱动之平台设备
- 导航栏下拉菜单效果代码
- [EasyTao(道)系列文章之一]太极之道
- orbeon form 的配置介绍
- Spring Retry 重试机制实现及原理
- docker build run 卡住_还在使用第三方Docker插件？SpringBoot官方插件真香！
- Unitest框架的使用(一)准备工作，接口定义和Unittest方法
- 自己写的Point类
- prettytensor 的使用
- 特征检测和特征匹配方法汇总
- leetcode—9.分离双指针题型python解答
- 解决eclipse打开报错:failed to create the java virtual ma
- python实例 输出你好
- 【电力电子技术AC-DC】单相桥式晶闸管整流电路（阻性/阻感性负载）simulink仿真
- 收藏！豆瓣9.0分TOP100职场终极必读书单！大萌哥整理
- 基于php的企业公文流转审批系统
- 20+主流跨境电商平台API地址大全
- 华硕z170a如何开启m2_华硕Z170主板bios如何设置|华硕Z170主板设置bios的方法
- 熊掌号必备SEO知识4：已开通熊掌号，站点换域名了怎么办？
- 将塑造未来世界的十大web3技术