多网页为了提升用户体验，都会在页面载入的时候有一个加载进度条的动画效果，以此来提升用户体验。

比较知名的进度条库有 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。现在已经获取了几个对象来做一个for循环，画出100个指针。我们需要通过JavaScript来创建这些span，因为这些span需要在图形的表盘上分布。这些span需要旋转一定的角度，然后再放入main中。现在表盘应该出来了，没有问题，但是似乎有些拥挤。我们需要修改CSS，将宽度设置为40个TB。将滑动杆向下移动25个TB。现在来看一下效果。现在来处理一下，当移动滑块时，颜色和中间的百分比会随之变化。实际上，这并不难，只需要监听滑杆的输入事件。我们需要修改滑轨的背景大小，只需将其水平方向的where复给百分号即可，而垂直方向则保持100%的宽度。

中间显示的百分比很简单，只需要将值给它就可以了。我们来看一下效果，移动滑块没有问题，滑轨的颜色和上面的百分比都跟着发生变化了。

接下来，我们需要写一个函数，当移动滑块时，改变仪表指针的颜色。我们需要循环所有的指针。当i小于传入的值时，我们需要设置前面一部分指针的颜色和属性。

首先，我们需要设置自定义的颜色bg。我们使用了CSS的色相饱和度函数，后面两个值代表饱和度和亮度，通常设置为100%和50%。这并不重要，我们需要设置色相。我们需要根据不同位置的指针设置不同的色相，这样颜色看起来会更加丰富。另外，我们还需要设置sg的颜色属性。

其他指针使用CSS中设置的黑色背景和透明sg。现在来看一下指针的颜色状态是否发生了变化，移动滑块，没有问题，可以跟着发生变化了。

这个视频到此结束，感谢大家的收看。

单属性汇总：

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