步驟 6
我們目前寫入的雲端試算表，網址和分頁都是固定的，如果可以在執行時讓使用者輸入的話，不是更有彈性嗎？在前面的步驟中，我們是使用跳出詢問的視窗，讓使用者輸入姓名和設備號碼，如果我們繼續使用這個辦法其實也是可行的，不過每次顯示畫面，都會跳出一堆詢問視窗，而且輸入錯誤還不能倒回去改，這是很麻煩的事，所以這次要使用輸入元件來處理這個部份。
- 修改 HTML 程式碼如下：
<h1>Webduino 數據上雲端</h1>
<div id="myinput" style="">
<p><span class="ilabel">姓名：</span><input type="text" id="iname"></p>
<p><span class="ilabel">設備：</span><input type="text" id="idid"></p>
<p><span class="ilabel">試算表 URL：</span><input type="text" id="url" value=""></p>
<p><span class="ilabel">試算表 分頁：</span><input type="text" id="tab" value=""></p>
<p><span class="ilabel">上傳間隔(s)：</span><input type="text" id="interval" value="3"></p>
<p><button onclick="start()">開始</button></p>
</div>
<div id="myoutput" style="display:none">
<p>您的姓名為 <span id='name'></span>，設備 ID <span id='did'></span>，傳送間隔 <span id='sinterval'></span> 秒</p>
<p>設備的亮度值為：<span id="lightvalue">尚未連線</span>
<p><button id="bsend" onclick="sendSwitch()">傳送資料</button></p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
標題下的第一段就是讓使用者輸入資料的標記和文字框，第二段則是要用來顯示內容的資訊。注意，第二段一開始設定 display:none 表示不會顯示出來。我們會在 JavaScript 檔中，處理使用者按鍵之後的動作（改成第一段不顯示，只顯示第二段）。
- 修改 CSS 程式碼如下：
h1 {
background: blue;
color: white;
font-size: 200%;
padding: 12px;
text-align: center;
}
span {
background: orange;
color: blue;
padding: 3px 6px;
margin: 0 2px;
}
span.ilabel {
display: inline-block;
background: #D6EAF8;
color: blue;
padding: 6px 6px;
margin: 0px 2px;
width: 150px;
text-align: right;
}
input[type='text'] {
width: 600px;
height: 2em;
background: #FCF3CF;
text-indent: 6px;
}
body {
text-align: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
這部份主要是格式設定，可以根據個人喜好調整。目前有許多屬性，如果不清楚的話也沒有關係。
- 先看一下顯示畫面是否 OK。接下來要修改 JavaScript 的程式碼，這部份較複雜，我們在一下步驟講解。