本文档旨在指导开发者如何将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 valueCont
ainer = 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;
}注意事项
-
输入验证： 确保输入框中的值是有效的数字。可以使用JavaScript进行输入验证，防止NaN值的出现。
-
性能优化： 如果动画速度过快或过慢，可以调整speed变量的值。
-
用户体验： 考虑添加一些过渡效果，使进度条的动画更加平滑。
总结
通过以上步骤，你已经成功地将JavaScript成绩计算器与动态圆形进度条相结合。每次点击“显示结果”按钮时，进度条都会根据计算出的平均分动态更新，为用户提供更直观的反馈。记住，理解代码背后的逻辑是关键，这样才能更好地应用和扩展这些技术。
