2.设置进度CSS样式。设置宽度、高度、边框圆角、溢出处理、边框颜色等属性#progress{width:100%;height:30px;position:relative;background-color:#ddd;border-radius:10px;overflow:hidden;}3.设置进度条CSS样式。设置宽度、高度、行高、文字颜色、背景色等属性#progress-bar{background-color:#d9534f;width:10px;height:30px;line-height:30px;position:absolute;text-align:center;color:white;background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);background-size:40px40px;}4.设置创建两个按钮并添加点击事件。开始进度结束进度5.start()方法，添加定时器。functionstart(){t=setInterval(progress,60);}6.判断当进度条到100%时，还没有到则停止定时器，执行该方法。functionprogress(){if(i<100){i++;bar.style.width=i+"%";bar.innerHTML=i+"%";}else{clearInterval(t);}}7.设置stop()方法，移除定时器，并停止执行。functionstop(){clearInterval(t);}8.调用方法实现效果。四、效果展示1、f12运行到chrome浏览器。2.点击开始进度按钮加载进度。显示进度加载状态。3.加载到100%停止计时器！4.按钮结束进度按钮，停止计时。直接从当前进度停止。五、总结本项目对事件监控中遇到的一些难点进行了分析，并给出了解决方案。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。HTML+CSS也可以做出网站页面的效果。在显示图片标题的地方不能使用绝对定位，所以使用相对定位。这个地方是布局的核心部分，否则文字不能放在图片上。这个进度条是用DIV+CSS制作实现的。通过调整DIV的宽度实现百分比进度条效果，可以美化背景和边框达到你需要的美观美化的进度条效果。代码很简单，希望对你有所启发。