进度条

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS2015和 JavaScript

撰写时间：2019年3月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

分享一个在项目学习中遇到的一个进度条的东西，个人感觉还是挺有意思的。

我们首先要做的是把bootstrap.min.css这个插件引进来，然后在div的class里添加一些样式类。

 

样式弄好后我们看下JavaScript代码，其原理就是类似于循环这样子，不断地调用另一个方法，当达到一定值的时候就结束循环。

首先定义两个变量，一个是用来赋值给进度条长度的，一个是用来当做计时器。再写两个方法，一个是按钮的点击事件，另一个是改变进度条长度的方法star()。当点击开始按钮时，按钮点击方法里面的判断就会判断进度条是否达到100%（也就是num变量是否等于100），没有的话就调用star这个方法，那个setinterval的意思就是每50毫秒调用一次star这个方法。这个star方法是每执行一次num的值就会加1，然后把值赋给进度条的宽度。这样一来就形成了动态的进度条。