JavaScript 循环结构实战:7个经典案例解析
本文通过7个JavaScript实战案例,深入解析循环结构的应用。内容涵盖求倍数总和、复利计算、水仙花数查找、奇偶求和、质数判定及图形打印。结合for与while循环,提供完整代码与运行逻辑,帮助初学者掌握循环控制与算法思维。
JavaScript 循环基础与案例概览
本文整理了一系列关于JavaScript循环结构的经典练习题,旨在帮助初学者通过具体实例理解并掌握循环语法。
求7的倍数总和与个数
第一个案例要求计算1到100之间所有7的倍数的个数及其总和。
var sum=0;
var n=0;
for(var i=1;i<=100;i++){
if(i%7==0){
sum+=i;
++n;
}
}
console.log("个数为:"+n+",总和为:"+sum);
代码执行后的输出结果如下所示。

复利增长年份计算
第二个案例模拟投资场景:假设年利率为5%,初始本金1000元,计算资金增长至5000元所需的年份。
var money=1000;
var i=0;
while(money<=5000){
money=money*1.05;
++i;
}
console.log("一共需要"+i+"年");
该计算过程的最终结果展示如下。

水仙花数查找算法
第三个案例旨在找出100到1000之间的所有水仙花数。水仙花数是指一个三位数,其各位数字的立方和等于该数本身,例如153等于1的3次方加5的3次方加3的3次方。
for(var i=100;i<1000;i++){
//取出百位上的数
var a=parseInt(i/100);
//取出十位上的数
var b=parseInt(i/10%10);
//取出个位上的数
var c=parseInt(i%10);
if(a*a*a+b*b*b+c*c*c==i){
console.log(i);
}
}
在代码实现中,十位数字可以通过公式 var b=paraseInt((i-bai*100)/10) 获取,尽管原文此处可能存在拼写错误,但逻辑意图是提取十位数值。
查找水仙花数的程序运行结果如下。

奇数求和逻辑实现
第四个案例要求计算1到100之间所有奇数的总和。判断奇数的标准是该数不能被2整除。
var sum=0;
for(var i=1;i<=100;i++){
if(i%2==0){
sum+=i;
}
}
console.log("奇数之和为:"+sum);
奇数求和的计算结果展示如下。

质数判定与输出
第五个案例用于判断2到100之间的所有质数。质数定义为大于1的自然数,且除了1和它本身外,不能被其他自然数整除。
for(var i=2;i<=100;i++){
var flag=true;
//如果循环到i的话,会有重复的因数
for(var j=2;j<=Math.sqrt(i);j++){
if(i%j==0){
flag=false;
break;
}
}
if(flag==true){
document.write(i+" ");
}
}
质数判断程序的运行结果如下。

三角形图案打印
第六个案例涉及图形打印,首先演示由少到多的三角形图案生成。
接着演示由多到少的倒三角形图案生成。
for(var i=1;i<=5;i++){
for(var j=1;j<=i;j++){
document.write("*");
}
document.write("<br/>");
}

第七个案例是打印标准的九九乘法表。
for(var i=0;i<5;i++){
for(var j=0;j<5-i;j++){
document.write("*");
}
document.write("<br/>");
}

九九乘法表生成
九九乘法表的最终输出结果如下。
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ")
}
document.write("<br/>");//进行换行
}
以上即为JavaScript循环用法的详细实例解析,更多相关技术内容可参考本站其他文章。

至此关于JavaScript循环用法的实例解析告一段落,如需了解更多JavaScript循环相关内容,敬请查阅本站往期文章或继续浏览下文,期待大家持续支持!
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
