这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战。
杨幂：“极度的坦诚就是无坚不摧。因为我很坦诚，所以很多东西都击不垮我“。最近在重看奇葩说，感觉杨幂活的太清醒了，有点想粉她了，哈哈哈。个人认为这句话说的非常对，也希望自己能坦诚的面对一切，越来越强大。
进入正题，这篇文章就利用javascript实现我们平时安装软件的进度条特效，继续往下看吧。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、进度条显示区域
2、安装按钮
布局核心html代码如下：
<div class="progressbar">
<div class="bar">
<div class="swap">
<div class="content"><span>0%</span></div>
</div>
</div>
<div class="btn">
<button id="btn">安装</button>
</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
加完样式信息后的布局如下图：
三、Javascript特效
1、获取所需标签对象：进度条背景标签对象、进度条内容标签对象、安装按钮标签对象，获取标签对象代码如下：
let content = document.getElementsByClassName("content")[0];
let span = document.getElementsByTagName("span")[0];
let btn = document.getElementById("btn");
2、为安装标签对象设置鼠标点击响应事件，这里进度条前进效果是通过让进度条背景标签对象宽高样式随着时间变化实习的。而时间的变化是通过设置定时器实现的，当进度条背景标签对象宽度等于进度条的宽度时，需要清除定时器，以此来模拟安装完成的效果。
let timer = null;
btn.addEventListener("click", () => {
let num = 0;
if (timer == null) {
timer = setInterval(() => {
num += 40;
content.style.width = num + "px";
content.style.height = 30 + "px";
span.innerText = `${num/4}%`
if (num == 400) {
clearInterval(timer);
}
}, 100)
}
})
至此，进度条特效就完成啦！撒花，嘿嘿嘿★,°:.☆(￣▽￣)/$:.°★ 。
