jq svg 修改image的xmlns:xlink及图片的显隐
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.10.2.min.js"></script>
<style>
#fengji, #cdc, #zwxd, #tsb1, #tsb2 {
display: none;
}
</style>
</head>
<body>
<svg version="1.1" id="sketchpad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="80%" height="80%" viewBox="60 0 1100 570">
<g>
<image overflow="visible" width="2880" height="2000" xlink:href="dajingcun.png"
transform="matrix(0.4246 0 0 0.3336 -4 -55.6528)">
</image>
</g>
<!--绘制指示灯开始-->
<g id="lempBox">
<image id="fengji" x="285" y="370" width="15" height="15" xlink:href="run.gif"></image>
<image id="cdc" x="707" y="315" width="15" height="15" xlink:href="run.gif"></image>
<image id="zwxd" x="1027" y="385" width="15" height="15" xlink:href="run.gif"></image>
<image id="tsb1" x="465" y="140" width="15" height="15" xlink:href="run.gif"></image>
<image id="tsb2" x="485" y="145" width="15" height="15" xlink:href="run.gif"></image>
</g>
<!--绘制指示灯结束--> <!--绑定数据开始-->
<g transform="translate(00 -15) ">
<text x="195" y="165" fill="#082b59"
style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;">Q=
</text>
<text x="255" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:9px;">m³/h</text>
<text x="248" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;"
id="JSSSLL">暂无数据
</text>
<rect width="50" height="15" x="200" y="155" style="fill:transparent;stroke-width:1;stroke:#002e73;"></rect>
</g> <!--绑定数据结束-->
</svg>
<script>
function judgeSta(data, id) {
if (data != undefined) {
$("#" + id).css("display", "block");//设置元素的显隐
var lempBox = document.getElementById(id);
if (data.RunStatus == "1.0") {
lempBox.href.baseVal = "run.gif";//修改image的图片
}
if (data.RunStatus == "0.0") {
lempBox.href.baseVal = "stop.gif";
}
if (data.ErrorStatus == "1.0") {
lempBox.href.baseVal = "alarm.gif";
}
}
}
searchData();
function searchData() {
var data = {
"code": 200,
"success": true,
"message": "findDeviceRealTimeInfo success",
"data": {
"shebe1": {"Flow": "0.03", "dataTime": "1513063954727", "deviceId": "1025"},
"shebe2": {
"RunStatus": "1.0",
"AutoStatus": "0.0",
"ErrorStatus": "0.0",
"dataTime": "1513063954727",
"deviceId": "1024"
},
"shebe3": {
"AutoState": "1.0",
"RunStatus": "1.0",
"ErrorStatus": "0.0",
"dataTime": "1513063954724",
"deviceId": "1019"
},
"shebe4": {
"dataTime": "1513063954725",
"AutoState": "0.0",
"RunStatus": "0.0",
"ErrorStatus": "0.0",
"deviceId": "1020"
},
"shebe5": {
"AutoState": "1.0",
"RunStatus": "0.0",
"dataTime": "1513063954723",
"ErrorStatus": "0.0",
"deviceId": "1017"
},
"shebe6": {
"ErrorStatus": "0.0",
"dataTime": "1513063954724",
"RunStatus": "0.0",
"AutoState": "0.0",
"deviceId": "1018"
}
}
};
var JSSSLL = document.getElementById("JSSSLL");//进水瞬时流量
if (data.data.shebe1 != undefined) {
if (data.data.shebe1.Flow != undefined || data.data.shebe1.Flow != null) {
JSSSLL.textContent= parseFloat(data.data.shebe1.Flow).toFixed(2);// 文本框赋值
}
}
judgeSta(data.data.shebe3, "fengji");
judgeSta(data.data.shebe4, "cdc");
judgeSta(data.data.shebe2, "zwxd");
judgeSta(data.data.shebe5, "tsb1");
judgeSta(data.data.shebe6, "tsb2"); } </script>
</body>
</html>
jq svg 修改image的xmlns:xlink及图片的显隐的更多相关文章
- ios 修改导航栏返回按钮的图片
修改导航栏返回按钮的图片 方法1: [UINavigationBar appearance].backIndicatorTransitionMaskImage = [UIImage imageName ...
- JQ无法修改input的type属性的替代解决方法
需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...
- JQ 动态修改/替换某个节点的内容
<div class="box">我们定位于中国心理行业第一<div> $(".box").html($(".box&quo ...
- jQ处理页面中尺寸过大的图片
这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用css的max-width来加以 控制,但ie6却不吃这套.我在做一个站时,就遇到这种困惑,因 ...
- Oracle修改时间报:ORA-01830: 日期格式图片在转换整个输入字符串之前结束的解决办法
1.错误原因: date类型不能包含秒以后的精度. 如日期:2010-01-01 20:02:20.0 解决方法:将日期秒以后的精度去除, to_date(substr(INVOICE_DATE,1, ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...
- 【转】Jquery修改image的src属性，图片不加载问题
1.当点击某一按钮的时候,把图片域中的图片改变一下 <img id="randimg" src="/servlet/CreateValidateNum&quo ...
- Android系统移植与调试之------->如何修改Android设备的桌面背景图片
1.切换到~/mx0831-0525/device/other/TBDG1073/overlay/frameworks/base/core/res/res目录 2.准备好一张相应尺寸的图片并且命名为d ...
随机推荐
- TM-align TM-score安装
TM-align是由zhang yang LAB开发的一款做蛋白结构比对的软件. 下载链接:http://zhanglab.ccmb.med.umich.edu/TM-align/TMtools201 ...
- VS 应用模板 所交税和实发工资的运算
double SFGZ, SL, SSKCS, YFGZ,a,YJS; //应发工资(基本工资),税率,速算扣除数,应发工资,判断标准,交多少税 //double QZD = 3500;//起征点 无 ...
- div上下左右居中方法
方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...
- Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
很明显应该是HADOOP_HOME的问题.如果HADOOP_HOME为空,必然fullExeName为null\bin\winutils.exe.解决方法很简单,配置环境变量,不想重启电脑可以在程序里 ...
- 有关g++的Xlinker选项
事情的起因是,在使用Eclipse配置opencv的库时,发现使用-Wl 选项需要自己在Linker flags的输入框里指定.并不是像使用-l选项或-I选项那样可以直接添加选项的条目就可以了.但是在 ...
- python中的IO操作
python中的基本IO操作: 1) 键盘输入函数:raw_input(string),不作处理的显示,与返回. input(string),可以接受一个python表达式作为返回,python内部得 ...
- python 爬取qidian某一页全部小说
本文纯粹用于技术练习,请勿用作非法途径 import re import urllib.request from bs4 import BeautifulSoup import time url= ...
- 5.JVM的内存区域划分
一.JVM介绍 1. 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟 ...
- 转 VS2010 RDLC 横向合并时“未正确设置 tablix“Tablix1”的 FixedData 属性”错误解决方法 .
最近在使用Rdlc做报表打印,有些报表的表头需要合并表头.Rdlc本身提供了横向合并的工具,但是在实际合并的时候,会出现“未正确设置 tablix“Tablix1”的 FixedData 属性.除非在 ...
- Thinking-Bear magic （计算几何）
---- 点我 ---- 题目大意: 给你一个正n边形及边长 a和一个正整数L, 求正多边形的面积s,若s大于L,则连接相邻两边的中点,形成新的正多边形,重复这个操作直至s小于L:如图: 正多边形的面 ...