当前位置：首页 > 文章列表 > 文章 > 前端 > 动态更新JS进度条实现技巧

动态更新JS进度条实现技巧

2025-09-06 18:49:03 0浏览收藏

想知道如何让你的JavaScript成绩计算器更炫酷吗？本文将手把手教你实现一个动态更新的圆形进度条，让成绩展示更直观！通过修改`show_result()`函数，我们将计算出的平均分与进度条完美结合，点击“显示结果”按钮，进度条就能根据你的成绩百分比，以流畅的动画效果实时更新。文章详细讲解了JavaScript代码的关键修改，包括如何清除旧动画、动态设置进度条目标值、以及处理无效输入等问题，确保进度条的准确性和用户体验。无需修改HTML结构和CSS样式，只需简单几步，就能让你的成绩计算器瞬间升级，赶快来学习吧！

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

本文档旨在指导开发者如何将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;
}