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次幂之和等于它本身。
例如:13 + 53 + 33 = 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 / >')
}