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

如下段代碼是前段的溫度計(jì)界面，這個(gè)在前面的物聯(lián)網(wǎng)WiFi溫度監(jiān)控中有提到過(guò)。這次需要復(fù)制出來(lái)顯示濕度，形成溫濕度的監(jiān)控。

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

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

以上就完成了兩個(gè)溫度計(jì)的復(fù)制，接下來(lái)針對(duì)第二個(gè)溫度計(jì)作為濕度計(jì)進(jìn)行內(nèi)容的修改。濕度范圍是0到100%，其實(shí)這個(gè)應(yīng)該根據(jù)DHT11的濕度范圍20%到90%更改。

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

代碼中的range2和humidity分別對(duì)應(yīng)濕度計(jì)數(shù)值和高度。

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

通過(guò)測(cè)試，實(shí)現(xiàn)了單片機(jī)控制DHT11采集溫濕度數(shù)據(jù)，控制WiFi模塊上傳溫濕度數(shù)據(jù)到網(wǎng)頁(yè)進(jìn)行遠(yuǎn)程監(jiān)控。