用HTML5、css和JavaScript写一个功能页面上有个一进度条要求实现点击按钮进度条缓慢变为100进度条上会显示进度数字百分号

HTML5：

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

CSS：

.progress-bar {
  width: 500px;
  height: 20px;
  border: 1px solid #ccc;
  position: relative;
}
.progress {
  width: 0;
  height: 100%;
  background-color: #4CAF50;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 2s ease-in-out;
}

JavaScript：

function startProgress() {
  var progressBar = document.getElementById("progress");
  progressBar.style.width = "100%";
  progressBar.innerHTML = "100%";
}

这段代码实现了一个进度条和一个按钮。点击按钮后，进度条会缓慢变为100%并显示进度数字百分号。CSS中使用了transition属性来实现进度条缓慢变化的效果。JavaScript中通过获取进度条元素并设置其宽度和innerHTML来实现进度条的变化和数字显示。