用HTML5、css和JavaScript写一个功能页面上有个一进度条要求实现点击按钮进度条缓慢变为100

HTML代码：

<div class="progress-bar"></div>
<button onclick="startProgress()">开始进度条</button>

CSS代码：

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: blue;
  transition: width 2s;
}

JavaScript代码：

function startProgress() {
  var progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = '100%';
}

解释：进度条的样式通过CSS定义，使用transition属性来实现缓慢变化。当点击按钮时，调用startProgress()函数，通过JavaScript获取进度条的元素，将其宽度改为100%。由于CSS中已经定义了transition属性，进度条会缓慢地从0%变为100%。