jquery实现进度条

jquery实现进度条

最近看到一个网站的进度条很好看所以想写这篇有点不是很好的文章

我们先把我们网页的大致布局写好，
我用了个input标签和两个div标签。
如下图：

然后我在给我定义的类写CSS样式。如下图：

在这里，我还引用Bootstrap框架，

• 因为我只是实现一个进度条的功能，所以我把代码写在了个HTML文件中，如果你们自己想在自己的网站中实现进度条，不要像我这样写哦！

• 现在我们要写JS部分的代码了，为了省时间我直接截图了哦！

• 
  我们用一个方法来控制进度条的运行，当我们点击按钮时，计时器就会运行，进度条就会出现。
  但我没有写暂停代码，所以点击一次就动一次，中间不能暂停。
  效果图：
  
  如果不喜欢有框框，就把Css样式中border这一行注释吧
  在jquery中还有很多的进度条插件，大家可以找找哦！