4

This is my HTML code. I would like to read the temperatures from a locally-stored *.txt file and replace the div content with the value read from *.txt file.

<div class="floortitle">Temperaturen</div>
<div class='tempfield'>
    <div class='picpos'><img src='heating.gif'></div>
    <div style="position:absolute; top: 255px; left: 65px;">
        <div class='tempbox' id='Temp1'>11&deg;C</div>
    </div>
    <div style="position:absolute; top: 255px; left: 102px;">
        <div class='tempbox' id='Temp2'>12&deg;C</div>
    </div>
    <div style="position:absolute; top: 151px; left: 145px;">
        <div class='tempbox' id='Temp3'>13&deg;C</div>
    </div>
    .
    .
    . till Temp 6
    .
</div>

The content of the *.txt file looks like this.

02.10.2013;17:40:59;Temp 1;17;
02.10.2013;17:40:59;Temp 2;27;
02.10.2013;17:40:59;Temp 3;34;
02.10.2013;17:40:59;Temp 4;46;
02.10.2013;17:40:59;Temp 5;53;
02.10.2013;17:40:59;Temp 6;61;

But the result could also start with Temp 4,5,6,1,2,3 depends of when measuring is done in time page is refreshed. To prepare the *.txt file, I use a simple tail -6 originallog.txt

I think this can be done with JavaScript, but when I search the Internet, I always find results to just output the results, without searching for String and matching to a corresponding div.

The following steps should be done:

  1. Open *.txt file and read content
  2. Search for Temp 1 to Temp 6 --> loop with something like document.getElementById('Temp $i')
4

2 回答 2

2

这是使用正则表达式和替换方法提取值的一种方法：

var tempResult={};
string.replace(/Temp (\d);(\d+)/gm,function($0,$1,$2){tempResult[$1]=$2;});

作为记录，replace 在这里没有替换任何东西，只是循环遍历字符串。$1 匹配 Temp 索引， $2 匹配温度。

然后，您可以填充您的 div，例如：

for (var i=1;i<7;i++) {
    document.getElementById("Temp"+i).innerHTML=tempResult[i]+"&deg;C";
}

现场演示：http: //jsfiddle.net/pYB55/

于 2013-10-03T21:00:17.217 回答
0

非常感谢你，这是完美的工作......

<script type="text/javascript">

var ax_object ;
if(navigator.appName.search('Microsoft')>-1) { ax_object = new ActiveXObject('MSXML2.XMLHTTP'); }
else { ax_object = new XMLHttpRequest(); }

function open_file() {
ax_object.open('get', 'mytemp.txt', true); 
ax_object.onreadystatechange= read_file;
ax_object.send(null);
}

function read_file() {
if(ax_object.readyState==4) {
var tempResult={};
ax_object.responseText.replace(/Temp (\d);(\d+)/gm,function($0,$1,$2){tempResult[$1]=$2;});

for (var i=1;i<10;i++) {
document.getElementById("Temp"+i).innerHTML=tempResult[i]+"&deg;C";

}
}
}


</script>
</head>
<body onload="open_file()">
<div class="floortabs" id="ftabs"></div>
<div class="floortitle">Temperaturen</div>
<div class='tempfield'>
    <div class='picpos'><img src='heating.gif'></div>

    <div style="position:absolute; top: 255px; left: 65px;">
        <div class='tempbox' id='Temp1'>11&deg;C</div>
    </div>
    <div style="position:absolute; top: 255px; left: 102px;">
        <div class='tempbox' id='Temp2'>12&deg;C</div>
    </div>
    <div style="position:absolute; top: 151px; left: 145px;">
        <div class='tempbox' id='Temp3'>13&deg;C</div>
    </div>

</div>
</body>
</html>

即使源文件没有正确排序，也会以正确的方式搜索值。

于 2013-10-04T05:35:05.887 回答