小白自制js进度条小demo

加粗样式
时光匆匆啊，目前还是只能待在家最好啊，小白最近在学js了，所以想做点小东西，勿喷哈，比起大神，我可是小白的小白，仅供娱乐哈
视频地址http://www.56.com/u33/v_MTYzNTEzODc4.html。欢迎欣赏。
废话不多说先把结构，样式搭上吧。


相信这种简单的结构样式代码，各位肯定能明白，我就不多解释了，今天的重头戏，js。
首先说下我做这个小demo的思路。
我先搭好结构，一个div包裹着居中显示，第一个p标签做一个边框，然后里面span标签通过js动态改变css的样式，通过改变宽度，背景颜色，让宽度从0到百分之百，达到一个进度的模拟效果，当然真实的是要有个数据交互的，这只是个娱乐哈，同时这里需要个定时器，让它重复的执行宽度变大，并且设定一个时间，就是每隔一段时间，执行这个宽度变大，一次变大多少，就随意定啦，我这里是1到2为例。第二个p标签动态加上一些文字和这个1%到100%数字，具体下面会解释，大致是这样，接下来说下用到了哪些技术点。
这个小demo的技术点，也就是用到的哪些函数方法
1，自定义一个函数，这不用多说啦，声明式函数或者赋值式函数都随意啦。
2，通过dom节点中的document.getElementsByClassName(‘span’)[0];得到class为span 标签的内容，当然这里为空，同样的方法获取第二个p标签也就是class为p标签的内容，这里也是空。document.getElementsByClassName(‘span’)[0].innerHTML=’值’，这是控制dom节点元素显示的内容方法，值就是要显示的内容。
3，定时器setInterval(参数1，参数2),这个就很重要啦，这个函数的作用是隔多少毫秒，刷新一次，执行这里面的代码。参数1可以是执行的代码，变量等，也可以是函数，参数2为毫秒数。
4，Math.random(),js官方函数，被称为去随机数，0到1之间（不包含1）的随机数，当然可以乘或者加上个数字，例Math.random()+5;这就是取0到5，（不包含5）的随机数，可以用Math.round(Math.random()*(n1-n2)+n2);得到一个n1到n2之间的整数数字，包括n2，(在此n1>n2，若n1<n2，则写为(n2-n1)+n1，同样的取到的数为n2到n1之间的，包括n1)，Math.abs(),取数学中的绝对值，就不多讲解，Math.round(),四舍五入的功能，比如，2.5，即为3，2.1即为2，具体解释说法，可以去w3c文档查找，类似与这个还有很多，例如Math.floor,Math.ceil等等，在这我就简单叙述下。
5，ClearInterval(),有定时器就有清除，不然不就一直执行下去啊。
这是整个js代码，我来逐一述说下。

第51行，不用说啦，声明一个函数，叫什么，随意啦。
第52行，定义一个变量为0，我这里定义名为n，这个我是用来存储这个进度条的宽，从0开始慢慢往上涨，就比如这个进度条加载满的时候总宽度200px,那么从0开始加到200，宽度依次增加，模拟实现一个从空到满的加载过程。
第53行，54行定义两个变量，指定html中的class为span的标签中的第一个，因为这里.getElementsClassName是获取到的是所有class为span的一个集合，同时这个集合是一个类数组对象，而[0]代表这个集合中的第一个值，也就是第一个class为span的标签，同样的class为p的标签获取方法也是一样。
第55行就是我说的定时器了，这里我设置了每隔500毫秒，就执行第一个参数里的函数，这里我直接写了一个匿名函数，上述第3点解释过了，可以为一个函数，最后把整个定时器赋值给一个变量，方便后面清除这个定时器。（匿名函数就是没有定义函数名的函数，统称为匿名函数）
第56~第64行，就是匿名函数里的代码了。
第56行，n进行累加，而加的值呢，就是从随机数里获取的整数1~2，意思是每次执行这个函数，n将不确定的累加一个1或者2的数字，当然随机数也可以写1到3，知识这里我写成了1到2，关于随机数的具体写法上述第4点解释过，我在这里将随机数封装了一个函数，所以直接写函数名进行调用，在给n累加，在最后会附上这个封装函数的代码图片。
第57到60行，判断如果n>=100，就清除定时器，因为加载当然是从0加载到100结束，这里就是控制结束这个定时器的条件和清除定时器代码。在这里我写了个n=100;为么呢，因为n是累加的，很可能最后一次是99+=随机数，若随机数为2，则累加后n为101了，有哪个加载会加载到101%呢？所以赋值给100，同时100就加载完毕了。
第60到61行，就是用js控制span标签，改变它的宽度，将n赋给它，执行一次就改变一次宽度，由于n是累加，所以宽度每次都是在加，宽度单位随以啦，可以是px，我这里用了百分比，同时改变这个span标签的背景颜色，这里我用随机数写了个16进制颜色的随机颜色赋给了这个背景颜色，也可以写个’blue’蓝色都行，同样的这个随机颜色我也封装起来了，结尾同样附上函数图片。
最后第63行就是动态js给第二个p标签改变内容了，让它显示个动态加载，的字样再加上n再拼接个%号，因为n是动态改变的，而因为我们的if判断，所以n最大值就是100了，也就加载结束了，所以每次都会改变，看起来更真实，
最后调用整个函数即可。
这是附上的封装的随机数，十六进制随机颜色代码。

最后看看效果吧。视频上方有链接欢迎看具体效果。

谢谢欣赏了，js小白望大佬勿喷哈，愿疫情尽快彻底结束!!!