一个JavaScript演示程序

最新推荐文章于 2023-03-22 22:45:12 发布

GoodDao

最新推荐文章于 2023-03-22 22:45:12 发布

阅读量812

点赞数

分类专栏： Web View 文章标签： javascript scroll function 浏览器 border 通讯

本文链接：https://blog.csdn.net/origin100/article/details/7701723

版权

Web View 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

昨天中午吃饭，硬件部的同事说他们从各个节点收集回来的参数，想在本地浏览器里面动态展示一下。
本来计划用PHP做的，感觉有点费事了，这点临时性小需求，有点浪费。于是想到用JavaScript解决一下。
大概需要解决的问题：
1.数据来源：通讯节点会通过com口收集回数据，写成格式化的文本文件。
2.Javascript 需要读取本地文件
3.列表数据需要根据节点数多少动态生成
4.循环刷新

例子：
数据 temp.txt

0002 28.4 27.6 25.6 28.6 33.6
0003 28.4 27.6 25.6 28.6 33.6
0004 28.4 27.6 25.6 28.6 33.6
0005 28.4 27.6 25.6 28.6 33.6
0006 28.4 27.6 25.6 28.6 33.6
0001 28.4 27.6 25.6 28.6 33.6
0009 28.4 27.6 25.6 28.6 33.6

页面index.html（IE浏览器打开）

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		<title>参数显示</title>
		<style type="text/css">
		<!--
		BODY {
		　　background: #FFFFCC;
		    TEXT-ALIGN: center;
		　　font-size: 9pt}
		P {
		　　COLOR: GREEN;
		　　font-size: 20pt}
		TD{
		    text-align:center;
		　　font-size: 15pt}
		
		-->
		</style>
		
		<script>
			//需要替换的路径
			var filePath="D:\\桌面\\temperature\\temp.txt";
		
			function clearRow(){ 
			   objTable= document.getElementById("testTbl"); 
			   var length= objTable.rows.length ;  
			   for( var i=1; i<length; i++ ){ 
				   objTable.deleteRow(1);    
			   } 
			} 
			
			function  upData(){
			    
				clearRow();
				
			    var Count = false, NO = 1;
				var arrRow = GetHeader(filePath).split("\r\n");
			
				function GetHeader(src){
					var ForReading = 1;
					var fso = new ActiveXObject("Scripting.FileSystemObject");
					var f = fso.OpenTextFile(src,ForReading);
					return(f.ReadAll());
				}
				
				for(var i=0;i<arrRow.length;i++){
					//alert("第"+(i+1)+"行数据为："+arrRow[i]);
					
					var newTr = testTbl.insertRow(testTbl.rows.length);
					Count = !Count;
					if(Count){
						newTr.style.background = "#FFE1FF";
					}else{
						newTr.style.background = "#FFEFD5";
					}
					
					var newTd0 = newTr.insertCell();
					var newTd1 = newTr.insertCell();
					var newTd2 = newTr.insertCell();
					var newTd3 = newTr.insertCell();
					var newTd4 = newTr.insertCell();
					var newTd5 = newTr.insertCell();
					
					
					if(arrRow[i].length>0){
						var arrColumn = arrRow[i].split(" ");
						//for(var j=0;j<arrColumn.length;j++){
							//alert("第"+(i+1)+"行，"+"第"+(j+1)+"列"+"数据为："+arrColumn[j]);
						//}
						newTd0.innerText = arrColumn[0];
						newTd1.innerText = arrColumn[1];
						newTd2.innerText = arrColumn[2];
						newTd3.innerText = arrColumn[3];
						newTd4.innerText = arrColumn[4];
						newTd5.innerText = arrColumn[5];
						NO++;
					}
				}
			}
			
			function scroll() {
				upData();
			}
			
			
		</script>
	</head>
	<body onLoad="setInterval('scroll()',1500)">

		<p >节点指标参数显示</p>
		<table width="500" border=1 cellspacing="1" id="testTbl" style="font-size:14px;">
			<tr bgcolor="#FFEFD5">
				<td>节点</td>
				<td>温度</td>
				<td>电压</td>
				<td>电流</td>
				<td>功率</td>
				<td>电量</td>
			</tr>
		<table/>
	</body>
</html>