JavaScript-循环（while、for）_用javascript语言编制具有以下功能的网页。1、仿照课件上的程序分别用while和for-CSDN博客

文章目录

while
for

while

先体验

需求：向页面输出连续的数字
页面输出：document.write('')
连续的数字：
方法一：
document.write(1 + '<br />') document.write(2 + '<br />')…
方法二：

        n = 1
        document.write(n++ + '<br />')
        document.write(n++ + '<br />')

效果：在这里插入图片描述

上述的连续输出都太麻烦，需要复制粘贴，大量相同的内容，这时候就轮到循环出场了。

循环语句

通过循环语句可以反复的执行一段代码指定的次数。
语法：

        while (条件表达式) {
            // 循环体
        }

执行流程：
先对条件表达式进行求值判断，
如果值为true，则执行循环体，完毕后继续对表达式进行求值判断；
如果值为false，则终止判断。
体验：

        n = 1
        while (true) {
            alert(n++)
        }

这里一定用alert，不要用document.write()，会死循环

终止循环

方法一

使用break来终止循环。

        n = 1
        while (true) {
            alert(n++)

            if(n == 10){
                break
            }
        }

用if条件控制循环条件。

方法二

创建一个循环，往往需要三个步骤

初始化一个变量
在循环中设置一个条件表达式
定义一个更新表达式，每次更新初始化变量

    // 1. 初始化一个变量
    n = 1
    // 2. 在循环中设置一个条件表达式
    while(i <= 10){
        // 3. 定义一个更新表达式，每次更新初始化变量
        n++
    }

do…while循环

语法：

do{
	// 语句...
}while(条件表达式)

执行流程

会先执行循环体，会先执行循环体，循环体执行完毕后，在对while后的条件表达式进行判断；
如果结果为true，则继续执行循环体，执行完毕继续判断以此类推；
如果结果哦为false，则终止循环

实际上这两个语句功能类似，不同的是while是先判断后执行，而do…while会先执行后判断。
do…while可以保证循环至少执行一次。

体验

i = 1
do{
	document.write(i++ + '<br />')
}while(i < 10)

练习

需求：假如投资的年利率为5%，试求1000增长到5000，需要花多少年。
步骤分析：

给现在的数额定义一个变量
循环每年的钱和年数
定义循环条件
输出年

        // 1. 给现在的数额定义一个变量
        money = 1000
        year = 0
        // 2. 循环每年的钱
        // 3. 定义循环条件
        while(money <= 5000){
            money *= 1.05
            year += 1
        }
        // 4. 输出结果
        alert(money) // 5003.18854203379
        alert(year) // 33

for

也是一个循环，也称为for循环
语法

for(初始化表达式;条件表达式;更新表达式){
	循环体
}

for VS while

创建一个执行10次循环语句
while

        n = 0
        while(n < 10){
            document.write(n++)
        }

for

        for(n = 0;n < 10;n++){
            document.write(n)
        }

执行流程

执行初始化表达式，初始化变量（只会执行一次）
执行表达式条件，判断是否执行循环。
如果为true，则执行循环；
如果为fase，终止循环。
执行更新表达式，更新表达式执行完毕继续重复2

for循环中的三个部分都可以省略，也可以写在外部

i = 0
for(;i<10;){
	alert(i++)
}

如果在for循环中不写任何的表达式，只写两个；此时循环是一个死循环会一直执行下去，慎用！！！

练习一

需求：打印1－100之间的所有奇数之和
难点击破

打印1－100之间的数
for (var i = 1 ; i < 100; i ++ )
判断数是否是奇数（能不能被2整除）
i % 2 == 0 → 偶数
i % 2 != 0 → 奇数

for ( i = 1;i < 100;i++){
	if (i % 2 != 0){
		console.log(i)
	}

练习二

需求：答应1－100之间所有7的倍数的个数及总和。
难点击破

在练习一点基础上，添加一个变量来保存总数之和。

sum = 0
for ( i = 1;i < 100;i++){
	if (i % 7 == 0){
		console.log(i)
		sum += i
	}
	console.log(sum)

联系三

需求：水仙花数：水仙花数是指一个3为数，它的每一个数字的3次幂之和等于它本身。
例如：1³ + 5³ + 3³ = 153，请打印所有的水仙花数。

步骤分析

三位数代表范围在 100 － 1000
for(i = 100 ; i <= 1000;i ++)
提取个、百位上的数字。
取余数：个位 = i % 10 ；
or
百位 = parseInt(i / 100).
提取十位上的数字
十位 = parseInt((i % 100) / 10)
or
十位 = parseInt( i / 10) - 百位 * 10
判断i 是否是水仙花数

if (baibaibai + shishishi + gegege == i)

完整代码作为课后作业！！！

嵌套的for循环

需求：通过程序，在页面中输出如下的图形：

*
**
***
****
*****

难点突破

先输出正方形矩阵

document.write('*****<br />')
document.write('*****<br />')
document.write('*****<br />')
document.write('*****<br />')
document.write('*****<br />')

↓变简单

for (i = 0 ; i < 5 ; i ++){
	document.write('*****<br />')
}

解决每排打印的个数
document.write(‘*’) // 一个

外层循环决定高度；内层循环决定宽度。

for(i = 0 ; i < 5 ; i ++ ){
	for ( j = 0 ; j < 5 ; j++){
		document.write('*')
	}
	document.write('<br / >')
}

最终效果

for(i = 0 ; i < 5 ; i ++ ){
	for ( j = 0 ; j < (i + 1) ; j++){
		document.write('*')
	}
	document.write('<br / >')
}

变形
需求：将三角形倒过来

for(i = 0 ; i < 5 ; i ++ ){
	for ( j = 0 ; j < (5 - i) ; j++){
		document.write('*')
	}
	document.write('<br / >')
}