通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下
执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下
更新状态直接更新当前地址栏的内容，他不会产生后退操作，只是单纯修改当前地址。
要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下
网上例子：
他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值
把数组对应的内容给读出来。
history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。
通常我们也不会需要他执行特别复杂的操作，反而是hash非常的好用。
hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。
于是我们可以这样去做：
第<%= p %>页 共<%= intpagecoun(这里相当于总的页面的变量数)%>页<%if(p>1) { %>
<a href = "当前页面的名称.jsp? page=<%= 1%>" > 第一页</a>
<a href = "当前页面的名称.jsp? page= <%= p-1%>" > 上一页</a>
<% } %>
<%if(p<intpagecount这里意思是说如果当前页面小于总的页面) { %>
<a href="当前页面.jsp? page= <%= p+1 %>">下一页</a>
<a href="当前页面.jsp? page= <%=intpagecoun%>" >最后一页 </a>
下面的代码是按照你输入第几页就显示第几页的
<% } %>&bnsp&bnsp转到第<input type ="text"name="page" size="4">页
<input name ="submit" type="submit" value="GO"/></form></p>
也就是运用page 页面指令就可以完成页面的指定跳转了
代码如下：
<scripttype="text/javascript">functionvidplay() {varvideo =
document.getElementById("Video1")varbutton =
document.getElementById("play")if(video.paused) {
video.play()
button.textContent ="||"
}else{
video.pause()
button.textContent =">"
}
}functionrestart() {varvideo = document.getElementById("Video1")
video.currentTime = 0
}functionskip(value) {varvideo = document.getElementById("Video1")
video.currentTime += value
}</script></head><body><videoid="Video1">// Replace these with your own video files.<sourcesrc="demo.mp4"type="video/mp4"/>
<sourcesrc="demo.ogv"type="video/ogg"/>HTML5 Video is required for this example.<ahref="demo.mp4">Download the video</a>file.</video><divid="buttonbar">
<buttonid="restart"onclick="restart()">[]</button><buttonid="rew"onclick="skip(-10)"><<</button><buttonid="play"onclick="vidplay()">></button>
<buttonid="fastFwd"onclick="skip(10)">>></button></div>
扩展资料：注意事项
一、history.pushState(data, title [, url])
往历史记录堆栈顶部添加一条记录；
data: onpopstate事件触发时作为参数传递过去；
title:页面标题，当前所有浏览器都会忽略此参数；
url: 页面地址，可选，缺省为当前页地址；
二、history.replaceState(data, title [, url])
更改当前的历史记录，参数同上；
三、history.state：
用于存储以上方法的data数据，不同浏览器的读写权限不一样；
四、window.onpopstate：响应pushState或replaceState的调用；
HTML实现 后退【window.history.back()】默认
HTML实现 后退【window.history.back(-1)】 括号里面的负数字代表后退几个页面，如果是-2的话就代表后退2页
HTML实现 前进【window.history.forward()】//不常用
HTML实现 前进【window.history.forward(1)】//不常用 括号里面的正数就代表要前进的页。如果是3就表示前进3页
[html] view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>这是第一个页面</p>
<a href="HTMLPage2.htm">到dom页</a>
<input type="button" onclick="javascript:window.history.back()" value="后退"/>
<input type="button" onclick="javascript:window.history.forward()" value="前进" />
</body>
</html>
[html] view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>这是第二个页面</p>
<a href="HTMLPage3.htm">转到第一页</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.forward()">前进</a>
</body>
</html>
