文章导读

动态更新JavaScript成绩计算器的圆形进度条

作者 2025年9月4日 7

本文档旨在指导开发者如何将JavaScript成绩计算器与动态圆形进度条相结合，实现点击“显示结果”按钮后，进度条能够根据计算出的平均分动态更新。通过修改现有的JavaScript代码，我们将确保进度条在每次计算后都能准确反映学生的平均成绩。 ## 集成动态圆形进度条为了将动态圆形进度条集成到现有的JavaScript成绩计算器中，我们需要修改`show_result()`函数，以便在计算出平均分后更新进度条。关键在于获取计算出的百分比，并将其用于控制进度条的动画。 ### 修改JavaScript代码以下是修改后的JavaScript代码，重点在于`show_result()`函数中的进度条更新部分： “`javascript function show_result(){ let c = document.querySelector(“#c”).value; let mt = document.querySelector(“#mt”).value; let ph = document.querySelector(“#ph”).value; let ja = document.querySelector(“#ja”).value; let csa = document.querySelector(“#csa”).value; let to = parseFloat(c)+parseFloat(mt)+parseFloat(ph)+parseFloat(ja)+parseFloat(csa); const per = (to*100)/500; if (per >= 90){ document.querySelector(“.gra”).innerhtml = “A+”; }else if (per >= 80){ document.querySelector(“.gra”).innerHTML = “A”; }else if (per >=70){ document.querySelector(“.gra”).innerHTML = “B”; }else if (per >=60){ document.querySelector(“.gra”).innerHTML = “C”; }else if (per >=50){ document.querySelector(“.gra”).innerHTML = “D”; }else { document.querySelector(“.gra”).innerHTML = “F”; } document.querySelector(“.to”).innerHTML = to; document.querySelector(“.per”).innerHTML = per; if (per >=50) { document.querySelector(“.result h2”).innerHTML = “Pass”; } let progressBar = document.querySelector(“.circular-progress”); let valueContainer = document.querySelector(“.value-container”); let progressValue = 0; let progressEndValue = per; let speed = 10; // 确保之前的动画停止 clearInterval(window.progressInterval); window.progressInterval = setInterval(() => { if (isNaN(per)) { clearInterval(window.progressInterval); return; } progressValue++; valueContainer.textContent= `${progressValue}%`; progressBar.style.background = `conic-gradient( #4d5bf9 ${progressValue * 3.6}deg, #cadcff ${progressValue * 3.6}deg )`; if (progressValue >= progressEndValue) { clearInterval(window.progressInterval); } }, speed); }

关键修改说明：

progressEndValue = per;: 将计算出的百分比 per 赋值给 progressEndValue，这将作为进度条的目标值。
clearInterval(window.progressInterval);: 在设置新的 setInterval 之前，清除任何可能正在运行的旧的 setInterval。这通过将 interval ID 存储在 window.progressInterval 变量中来实现。
window.progressInterval = setInterval(() => { … }, speed);: 将 setInterval 的返回值（interval ID）存储在 window.progressInterval 中。
clearInterval(window.progressInterval);: 在 progressValue >= progressEndValue 时，使用存储的 interval ID 来清除 interval。
*`progressBar.style.background = … ${progressValue 3.6}deg**: 使用progressValue` 来动态更新进度条的背景角度。
isNaN(per): 检查百分比是否为 NaN (Not a number)，如果是，则停止进度条动画。这可以防止无效输入导致的问题。

HTML结构和css样式

HTML结构保持不变，CSS样式也无需修改，因为我们主要通过JavaScript来动态控制进度条的显示。

<div class="percent">     <div class="circular-progress">         <div class="value-container"></div>     </div> </div>

.circular-progress {     position: relative;     height: 150px;     width: 150px;     background-color: orange;     border-radius: 50%;     display: grid;     place-items: center; }  .circular-progress:before {     content: "";     position: absolute;     height: 84%;     width: 84%;     background-color: #ecf0f1;     border-radius: 50%; }  .value-container {     position: relative;     font-family: sans-serif;     font-size: 50px;     color: #231c3d; }