Question

这是我的HTML代码。我想从本地存储的* .txt文件中读取温度，并将div内容替换为从* .txt文件中读取的值。

<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>

* .txt文件的内容如下所示。

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;

但结果也可以从Temp 4,5,6,1,2,3开始，取决于在时间页面上进行测量时刷新。要准备* .txt文件，我使用简单的tail -6 originallog.txt

我认为这可以通过JavaScript完成，但是当我搜索互联网时，我总是找到结果只输出结果，而不搜索字符串并匹配到相应的div。

应该执行以下步骤：

打开* .txt文件并阅读内容
搜索Temp 1至Temp 6 - ＆gt;循环使用document.getElementById('Temp $i')

Answer 1

以下是使用regular expression和替换方法提取值的一种方法：

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

对于记录，替换不是在这里替换任何东西，只是循环遍历字符串。 $ 1与Temp指数匹配，$ 2与温度匹配。

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

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

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

Answer 2

非常感谢，这是完美的...

<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>

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

读取txt文件并输入html div标签

2 个答案: