多網頁為了提升用戶體驗，都會在頁面載入的時候有一個加載進度條的動畫效果，以此來提升用戶體驗。

比較知名的進度條庫有 NProgress，progressBar，progressJS 等等。使用方式也差不多，如下所示就是 NProgress 的使用方式：

NProgress.start();
NProgress.done();
NProgress.remove();

可以看到提供 start， done，remove 等方法，分別對應 開始，完成 和 刪除進度條容器，并且提供 set 方法可以設置進度條的加載速度等。

那么，有沒有辦法依據頁面加載的事件制作一個能較為準確表達加載進度的進度條呢？

其實是可以的。

首先來看網頁加載的事件有哪些（不考慮 IE 的 DOMContentLoaded）：

document.readystatechange 事件

readystatechange 會在 每次 readyState 發生變化的時候觸發

readyState 有以下狀態：

uninitialized - 還未開始載入

loading - 載入中

interactive - 互動文檔已經完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的資源仍在加載，文檔與用戶可以開始交互

complete - 載入完成

window.onload 事件

load 事件在 window，指的是網頁資源已經加載完畢（包括圖片、音頻、腳本、插件資源以及 CSS）

所有的資源全部加載完成后會觸發 window 的 load 事件。

通俗一點地說 ：

1. document.readystatechange 事件會觸發多次。
2. 當 Dom Tree 生成完畢 那么 document.readyState 狀態翻轉為 complete
3. 當 網頁所有資源加載完畢 window.onload 觸發

但是由于當前頁面加載時候，document.readyState 的 uninitialized 和 loading 這2個狀態是無法捕獲的。因為 Dom Tree 還未生成，JS 代碼尚未能執行，所以能捕獲的狀態只有interactive 和 complete 這2個狀態

此時，擁有了3個可用節點，分別是

document.readyState 的 interactive

document.readyState 的 complete

window.onload

進度條 DOM 結構

<div class="progress">
  <div></div>
</div>

進度條的 默認 CSS

.abc {
  width: 100%;
  height: 10px;
}

.abc div {
  width: 0;
  height: 100%;
  background: green;
}

記得給進度條加上動畫

  transition: width .5s;

js 代碼 如下：

document.addEventListener('readystatechange', function () {
  if(document.readyState === 'interactive') {
    document.querySelector('.progress div').style.width = '33%'
  }

  if(document.readyState === 'complete') {
    document.querySelector('.progress div').style.width = '66%'
  }
} )
window.onload = function () {
  document.querySelector('.abc div').style.width = '100%'
}

分別在 3個節點 讓 進度條 width 漲 33% 66% 和 100%

此時 就得到了一個 相對準確的 加載進度條

享一個很酷炫的視頻，通過滑動桿控制儀表進度顯示，同時伴有燈光效果，看起來非常震撼。html非常簡單，只有幾個元素，使用了一個進度條滑動桿的控件。接下來我們重點來看一下CSS，從這里可以看到，頁面長什么樣子。

好的，現在來說一下滑動桿的樣式，這是一個滑軌的樣式，其他屬性沒有什么特別的，我們主要看一下這幾個。

首先要自定義進度條的樣式，box-shadow：因為這個控件瀏覽器默認會有一套自己的樣式，只有把 shadow設為難才可以自定義模式，如果把這個樣式去掉，那整個滑桿其它的樣式全部都不起效了。

非常重要的是這兩句的設置，這兩句有什么用呢？當移動滑塊時，大家注意滑軌，在滑塊的左邊它就會變成藍色，滑塊的右邊還是黑色，無論移到什么地方都一樣，主要用來控制這一個的。

接下來分析一下這兩句，為什么背景這里用了兩個顏色？第一個是漸變色，第二個是黑色。最主要的是漸變色里面的這兩個顏色還是同一個，lwhite都是這一個變量，說白了它壓根沒有漸變的效果。

·box-shadow：為什么不直接用這個顏色而要把它搞成漸變？box-shadow：首先用兩個顏色，是因為滑軌它就需要兩個顏色，滑塊的左邊是藍色，滑塊的右邊是黑色，這兩個顏色。之所以會對同一個顏色做漸變，是因為需要配合boxsha一起來使用。

通常background-size是用來設置背景圖顯示的，對單一顏色是不起作用的。這里用線性漸變就相當于取巧。white用了一個小技巧，因為這里漸變的就是同一個顏色，和單一顏色沒有區別，初始值設置為0100%，也就是這一個顏色。漸變的顏色開始是沒有顯示的，也就是現在這樣子。

如果我們把它改一下，改成50%。第一個顏色就會顯示到中間位置了，再改成90%，試一下。第一個顏色就會顯示到后面了。

→當滑塊移動的時候通過JS修改這一個值，是不是就可以動態同步滑軌的顏色狀態了？這里先改回0，再看一下這個樣式。s inputltype='range：webkit-lips thumb。這是一個滑塊的樣式，沒有什么特別要說的，用的屬性都很簡單。

主要就來看一下這個偽元素，用這個偽元素就說明要修改的是滑塊的樣式。僅此而已。

→還有就是滑塊的發光效果用的就是陰影，也就是這一個的樣式。以下是清除中間顯示百分比數字的樣式，沒有什么特別的，主要是中間發光的效果。后面兩個是中間儀表盤的樣式，但現在還沒有span，需要通過JavaScript創建出來。樣式很簡單，沒有特別的，我們來看看JS?，F在已經獲取了幾個對象來做一個for循環，畫出100個指針。我們需要通過JavaScript來創建這些span，因為這些span需要在圖形的表盤上分布。這些span需要旋轉一定的角度，然后再放入main中。現在表盤應該出來了，沒有問題，但是似乎有些擁擠。我們需要修改CSS，將寬度設置為40個TB。將滑動桿向下移動25個TB?，F在來看一下效果。現在來處理一下，當移動滑塊時，顏色和中間的百分比會隨之變化。實際上，這并不難，只需要監聽滑桿的輸入事件。我們需要修改滑軌的背景大小，只需將其水平方向的where復給百分號即可，而垂直方向則保持100%的寬度。

中間顯示的百分比很簡單，只需要將值給它就可以了。我們來看一下效果，移動滑塊沒有問題，滑軌的顏色和上面的百分比都跟著發生變化了。

接下來，我們需要寫一個函數，當移動滑塊時，改變儀表指針的顏色。我們需要循環所有的指針。當i小于傳入的值時，我們需要設置前面一部分指針的顏色和屬性。

首先，我們需要設置自定義的顏色bg。我們使用了CSS的色相飽和度函數，后面兩個值代表飽和度和亮度，通常設置為100%和50%。這并不重要，我們需要設置色相。我們需要根據不同位置的指針設置不同的色相，這樣顏色看起來會更加豐富。另外，我們還需要設置sg的顏色屬性。

其他指針使用CSS中設置的黑色背景和透明sg?，F在來看一下指針的顏色狀態是否發生了變化，移動滑塊，沒有問題，可以跟著發生變化了。

這個視頻到此結束，感謝大家的收看。

單屬性匯總：

1 name屬性

服務器會識別不同的name屬性，并根據name屬性來捕獲不同元素內的數據。

2 value屬性

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;

3 type屬性

它決定了<input>標簽在頁面中的表現樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設置列表框顯示的行數；

文本框和密碼框會使用size屬性設置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數據提交到服務器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區域)，用來禁止輸入任何信息；

可以將數據提交到服務器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(如單選按鈕和復選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；

7 placeholder屬性

規定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性 默認值：輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器；

off(也可寫成wrap)：不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理；

關于如何限制文本域輸入字符串的長度 見javascript|語法|設置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

當使用 "hard" 時, 必須規定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起；

必需的屬性:type name value

5 復選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2

通過設置相同的name屬性可以把多個復選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設置size屬性,則該元素會顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);

還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；

通過<optgroup>標簽把相關的選項組合在一起：

<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

<input type="button" name="" value="普通按鈕"/>

它一般是配合javascript來使用;

關于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標簽

在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發送到電子郵箱時，enctype的值必須設為"text/plain",否則將會出現亂碼。

發送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

框架名稱 指定指定窗口或框架名稱

label標簽

作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。

PHP實例：創建發送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php