练习一.任意数求和(最多输入十位数)，输入999终止
运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var sum=0;
for(var i=1;i<=10;){
var num=Number(prompt('请输入一个数字'));
if (num==999){break;}
else if(num>0){
sum+=num;
}
else if(!num){
alert('输入错误')
continue;
}
i++;
}
document.write('您输入了'+(i-1)+'个数');
document.write('和为'+sum);
</script>
</head>
<body>
</body>
</html>
效果图
输入2+2,999终止
案例二.输入任意年月日实现判断其为该年的第几天
注意，在解决该问题过程中要注意平年闰年的问题
运行代码如下
方法一
switch (month-1){
case 11:
sum+=30;
case 10:
sum+=31;
case 9:
sum+=30;
case 8:
sum+=31;
case 7:
sum+=31;
case 6:
sum+=30;
case 5:
sum+=31;
case 4:
sum+=30;
case 3:
sum+=31;
case 2:
sum+=28;
case 1:
sum+=31;
case 0:
sum+=0;
}
if((year%4==0&&year%100!=0||year%400==0)&&month>2){
sum+=(day+1);
}else{
sum+=day;
}
document.write("您输入的"+year+"-"+month+"-"+day+"为该年的第"+sum+"天");
方法二
for(var i=1;i<month;i++){
if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){
sum+=31;
}
if(i==4||i==6||i==9||i==11){
sum+=30;
}
if(i==2){
sum+=28;
}
}
if((year%4==0&&year%100!=0||year%400==0)&&month>2){
sum+=(day+1);
}else{
sum+=day;
}
document.write("您输入的"+year+"年"+month+"月"+day+"日是该年的第"+sum+"天");
效果图
验证正确
案例三.模拟银行ATM取款问题，默认密码111111，三次输入机会，取款面值100
运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var isTrue=false;
for (var i=1;i<=3;i++){
var password=prompt('请输入密码：');
if(password==111111){
isTrue=true;
break;
}
}
if(!isTrue)alert('密码错误，请取卡');
while (isTrue){
var $=prompt('请输入取款金额：');
if($%100==0&&$<=1000&&$>=0){
document.write('您取了'+$+'元');
document.write('，交易完成，请取卡！');
break;
}else{
alert('您输入的金额不合法，请重新输入');
}
}
</script>
</head>
<body>
</body>
</html>
效果图
密码输入错误(此处连输3次2)
结果显示
金额输入错误(此处连输150)
显示为
验证正确，符合要求。
案例四.嵌套循环练习--菱形图形
嵌套循环特点
外层循环控制行数
内层循环控制每行个数
【思路】
1.确定图形行数
2.确定每行中的元素个数，代表有几个内层循环
3.确定每种元素的个数，即为每个内层循环的次数
Tips:找出每种元素的个数，与行号的关系式，即为当前内循环的最大值
代码
for(var i=1;i<=4;i++){
for(var k=1;k<=4-i;k++){
document.write("<span style='display: inline-block; 7px;'></span>");
}
for(var j=1;j<=2*i-1;j++){
document.write("*");
}
document.write("<br />");
}
for(var i=1;i<=3;i++){
for(var k=1;k<=i;k++){
document.write("<span style='display: inline-block; 7px;'></span>");
}
for(var j=1;j<=7-2*i;j++){
document.write("*");
}
document.write("<br />");
}
效果图
案例五.嵌套循环练习--数字等边三角形
代码
for(var i=1;i<=4;i++){
for(var k=1;k<=4-i;k++){
document.write("<span style='display: inline-block; 8px;'></span>");
}
var n=1;
//递增
for(var j=1;j<=i;j++){
document.write(n);
n++;
}
//递减
n-=2;
for(var j=1;j<=i-1;j++){
document.write(n);
n--;
}
document.write("<br />");
}
运行效果
JS的循环嵌套时一定要注意思路，思路明了，问题就变得非常简洁