讀取txt文件並將其放入html div標記

這是我的HTML代碼。我想從本地存儲的* .txt文件讀取溫度，並用* .txt文件中讀取的值替換div內容。讀取txt文件並將其放入html 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> 
    . 
    . 
    . 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文件和讀取內容
搜索溫度1至6溫度 - >環路的東西，如document.getElementById('Temp $i')

來源

2013-10-03 user2844239

從文件閱讀幫助，請看這裏：http://stackoverflow.com/questions/14446447/javascript-read-local-text-file –

查找FileReader和輸入類型=文件 – dandavis

凱爾感謝您的答覆，我沒有問題打開一個文本文件，我確實有問題，有一個很好的循環填充到相應的div。接下來的問題是，如果txt文件的內容以Temp 4開始，那麼我需要搜索字符串。 – user2844239

這裏是一種方法來提取您的值，使用regular expression和替換方法：

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

爲了記錄，替換在這裏沒有取代任何東西，只是在字符串中循環。 $ 1符合溫度指數，$ 2符合溫度。

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

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

現場演示：http://jsfiddle.net/pYB55/

來源

2013-10-03 21:00:17 Christophe

非常感謝你，這是工作完美...

<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-04 05:35:05 user2844239

讀取txt文件並將其放入html div標記

回答

相關問題