input框实现进度条效果

相信大家在平时浏览网页找东西的时候，点击的跳转链接或者是下载某些东西会有一个进度条，当进度条完成之后才会完成下载或是实现跳转等。
看到这里就会觉得能有一个进度条的效果感觉好厉害，到底是怎么实现的呢？其实现在有很多插件可以实现一个进度条的效果，但一个简单的插件还好说，遇到难的，可能连参考手册都看不懂，所以今天我用普通的input框来实现一个进度条效果，加载完成实现跳转网页，方法很简单，看完绝对会。

我这里为了编写代码方便，还是引入了两个插件，这两个插件之前也讲过或者说大家也知道，这里便不再赘述。那么下面我将开始代码步骤的讲解。

首先我做了一个简单的样式，一个form表单，默认display样式为none（隐藏），里面有两个input框：一个作为显示加载的进度条，一个用于显示加载的进度，分别设置样式，让它们呈现出一个简单的加载样式。在form表单外放一个按钮，作为一个演示，通过按钮点击触发点击事件显示该form表单，然后调用设置在按钮上的点击事件让进度条开始加载，最后加载完成之后弹出提示，跳转到另一个网页。
页面布局完成之后下面将是js部分。

在写方法之前还需要准备一些参数，这里创建了三个变量