淮安侣拘广告传媒有限公司

在制作教程的時候，為了顯示出濕度，將溫度計的網頁界面進行復制，改成濕度計。在簡單的復制中發(fā)現(xiàn)一些問題。如下是上次制作的溫度監(jiān)控界面，本次復制一個溫度計作為濕度計。

如下段代碼是前段的溫度計界面，這個在前面的物聯(lián)網WiFi溫度監(jiān)控中有提到過。這次需要復制出來顯示濕度，形成溫濕度的監(jiān)控。

很簡單，將這段代碼復制之后，則會出現(xiàn)兩個溫度計復制后的結果是，這兩個溫度計并不在同一行上，因此這就是要解決的一個問題。

查閱資料，在原本的代碼外圍增加div，并且設置style="float:left;width:200px;"，其中float:left;是讓第一個溫度計居左，width:200px;是這是溫度計的寬度，否則兩個溫度計會挨的特別近。

以上就完成了兩個溫度計的復制，接下來針對第二個溫度計作為濕度計進行內容的修改。濕度范圍是0到100%，其實這個應該根據DHT11的濕度范圍20%到90%更改。

接下來對濕度數(shù)據進行提取，之前的溫度計中已經接收到數(shù)據，所以非常方便。在js代碼中獲取到前端的控件，包括濕度計高度和數(shù)據顯示。如下端代碼的range2和humidity。

代碼中的range2和humidity分別對應濕度計數(shù)值和高度。

最終接收到代碼數(shù)據。

通過測試，實現(xiàn)了單片機控制DHT11采集溫濕度數(shù)據，控制WiFi模塊上傳溫濕度數(shù)據到網頁進行遠程監(jiān)控。