js动态进度条

root
abc abc

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>工作进展</title> <link rel="stylesheet" href="styles.css"> <style> body { font-family: Arial, sans-serif; } #steps { margin-top: 20px; } .step { margin-bottom: 10px; } .step-title { font-weight: bold; } .step-progress { margin-top: 5px; } </style> </head> <body> <div id="app"> <h1>工作进展</h1> <div id="steps"> <!-- 动态插入步骤 --> </div> </div> <script > document.addEventListener('DOMContentLoaded', function () { const steps = [ { title: '步骤1: 准备', progress: 30 }, { title: '步骤2: 设计', progress: 60 }, { title: '步骤3: 开发', progress: 80 }, { title: '步骤4: 测试', progress: 100 } ]; const stepsContainer = document.getElementById('steps'); steps.forEach(step => { const stepDiv = document.createElement('div'); stepDiv.className = 'step'; stepDiv.innerHTML = ` <div class="step-title">${step.title}</div> <div class="step-progress">${step.progress}%</div> <progress value="${step.progress}" max="100"></progress> `; stepsContainer.appendChild(stepDiv); }); }); </script> </body> </html>
  • Page 1 of 1
Reply