进度条案例

点击开始按钮，进度条可以开始，如果当前进度不为0，开始按钮就没有作用；点击暂停按钮，进度可以停下来；点击继续按钮可以让进度条继续，当进度条进度为0的时候，点击暂停就不起作用；点击停止按钮让进度条停下来，进度设置为0。
最终效果：

html结构代码：

<style>
.box{
    width: 300px;
    height: 30px;
    border:1px solid #000;
}
.progress{
    width: 0;
    height: 30px;
    background-color: pink;
}
</style>
<div class="box">
    <div class="progress"></div>
</div>
<button class="start">开始</button>
<button class="pause">暂停</button>
<button class="continue">继续</button>
<button class="stop">停止</button>

js代码：

// 获取所有标签
var box = document.querySelector('.box');
var progress = document.querySelector('.progress');
var startBtn = document.querySelector('.start');
var pauseBtn = document.querySelector('.pause');
var continueBtn = document.querySelector('.continue');
var stopBtn = document.querySelector('.stop');
// 定义定时器变量
var timerId = null;
// 设置开关变量
var flag = true;
// 给开始按钮添加点击时间
startBtn.onclick = function(){
    // 如果开关是关闭状态，点击按钮不起作用
    if(!flag){
        return false;
    }
    // 如果进度条的宽度不为0，点击就没有效果，此时应该点击继续按钮
    if(progress.offsetWidth !== 0){
        return false;
    }
    // 如果点击按钮能起作用，进度条可以进行，那在进度条走的过程中，将开关关闭
    flag = false
    // 定义初始宽度为0 - 因为开始一定是从0开始
    var num = 0;
    // 设置定时器让进度条的宽度不停的增加
    timerId = setInterval(function(){
        // 让宽度num增加
        num += 2;
        // 如果num增加到了大盒子的宽度，就停止定时器
        if(num>=box.clientWidth){
            num = box.clientWidth;
            clearInterval(timerId)
            // 进度条不动了，将开关打开，方便下次操作
            flag = true
        }
        // 将增加后的数字设置给进度条
        progress.style.width = num + "px"
    },50)
}
// 给暂停按钮添加点击事件
pauseBtn.onclick = function(){
    // 停止定时器
    clearInterval(timerId)
    // 进度条不动了，将开关打开，方便下次操作
    flag = true
}
// 给继续按钮添加点击事件
continueBtn.onclick = function(){
    // 如果开关是关闭状态，点击按钮不起作用
    if(!flag){
        return false;
    }
    // 如果当前进度为0，点击继续按钮没有效果，此时应该点击开始按钮
    if(progress.offsetWidth === 0){
        return false;
    }
    // 如果点击按钮能起作用，进度条可以进行，那在进度条走的过程中，将开关关闭
    flag = false;
    // 获取进度条当前的宽度
    var num = progress.offsetWidth;
    // 设置定时器让num增加
    timerId = setInterval(function(){
        // 让宽度增加
        num += 2;
        // 如果num增加到了大盒子的宽度，就停止定时器
        if(num>=box.clientWidth){
            num = box.clientWidth;
            clearInterval(timerId)
            // 进度条不动了，将开关打开，方便下次操作
            flag = true
        }
        // 将增加后的数字设置给进度条
        progress.style.width = num + "px"
    },50)
}
// 给停止按钮添加点击事件
stopBtn.onclick = function(){
    // 清除定时器
    clearInterval(timerId)
    // 进度条不动了，将开关打开，方便下次操作
    flag = true
    // 将进度条的宽度设置为0
    progress.style.width = 0
}