遥控器原理的分页

索引：前几天看电视，使用遥控器的时候突然想到，我们的数据分页也可以用这种模式。于是敲出来一个类似于遥控器控制电视原理的分页。

现在详细介绍下上图中按钮的作用：

清除按钮：当按下0-9这个几个按钮时，如果有按错在指定时间内可以单击清除来清除按下的所以按键。

0-9按扭，类似遥控器上的0-9按钮，没点击一个数字，后台都有一个变量记录，并以字符串的方式累加。在指定时间内会跳转到累加的数字上。比如点击1和4则会跳转到第14页，如果没有那么多页，则会跳转到最后一页。

To按钮：这是除了程序自动跳转外，点击To按钮可以立即跳转，不用等进度条读完。

To下的进度条：显示自动跳转的进度。

下一批：功能同正常分页的下一页一样

上一批：功能同正常分页的上一页一样。

优点：可以免去正常分页的繁琐，用户体验好。

缺点：要自己点击，或者等指定的时间。

html代码：

<div id="wp_cp">
          @if (pi > 1)
{
    <div id="wp_prev" onclick="Javascript:location.href='/Wall/WallNote?height=@clientY&width=@clientX&pi=@(pi-1)'">上一批</div>
}
<font id="wp_cm">清除</font><br/>
          <span>1</span><span>2</span><br/>
          <span>3</span><span>4</span><br />
          <span>5</span><span>6</span><br />
          <span>7</span><span>8</span><br />
          <span>9</span><span>0</span><br />
          <div id="ws_tiao">To</div>
          <div style="height:10px;background-color:#4cff00;0px;display:none;"></div>
          @if(pi<mcount)
          {
          <div id="wp_next" onclick="Javascript:location.href='/Wall/WallNote?height=@clientY&width=@clientX&pi=@(pi+1)'">下一批</div>
          }
          
         共<font>@pi/<a href="/Wall/WallNote?height=@clientY&width=@clientX&pi=@mcount">@mcount</a>页</font>
         <br/>
          <br/>

这个写起来也不麻烦，就不上全部代码了。