for-循环
for-循环初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// for循环的代码 要去记住！！
// let i = 1 ; 记录循环次数变量
// 循环条件； i要满足什么条件 循环才会被执行
// 变化值: i++
// 运作的过程
// 1 先执行 let i = 1;
// 2 再去执行 i<=100的判断
// 3 执行 console.log(i)
// 4 再去执行 i++;
// 5 去执行判断 i<=100
// 6 又去执行 console.log(i)
// 7 再去执行 i++
// 8 又去执行 i<=100
// 9 又去执行 console.log(i)
// 10 i++
// */
/*
1 先执行 let i = 1 ;
2 执行 判断 i <=100;
3 执行 console.log(i)
4 执行 i++
重复 2
重复 3
重复 4
*/
for (let i = 1; i <= 100; i++) {
document.write(`${i}<br>`)
}
</script>
</body>
</html>
for-循环求偶和案例
<script>
/*
早上 讲过 while实现偶数和 1-100
*/
// 计算偶数和
let sum = 0;
for (let index = 1; index <= 100; index++) {
// 判断偶数的条件
// if (index % 2 === 0) {
// sum = sum + index;
// }
// (index%2===0)&&(sum=sum+index)
(index%2===0)&&(sum+=index)
}
console.log(sum);
</script>
for-循环打印五百星星案例
<script>
/*
输出 500个 ⭐
for循环
*/
let star = '';
for (let index = 0; index <= 500; index++) {
star += '⭐';
}
// document.write(star);
console.log(star);
</script>
continue和break 介绍和简单的应用
个人理解：continue是结束当前循环语句，但是还会继续往下循环
break是结束整段循环，不管下面还有没有都不会再循环
如下：
<script>
/*
for
控制循环结束
1 continue 跳过本次循环 继续开启下次循环 （不是必须）
continue 想要跳过这个循环 不一定通过它
我们自己 if else 也能实现类似的功能
2 break 直接 循环结束 不玩了
也不是必须 ， 我们也是可以通过 if-else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 （性能更加好） 因为break会终止剩下的循环
如果当前的index 是一个奇数 下面的代码就不要再运行了 开启下一个循环
*/
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // console.log(index);
// continue;
// }
// console.log(index,"⭐");
// }
// 只显示 奇数 单数
// for (let index = 1; index <= 10; index++) {
// // 判断当前的index是不是奇数
// if (index % 2 !== 0) {
// // 奇数
// }else{
// // 偶数
// console.log(index,"⭐");
// }
// }
/*
continute 功能 其实 也是可以通过 if else 来模拟和实现
if else 根据条件来执行某段代码
continute 跳过循环（不想执行某段代码）
*/
// 只输出偶数
// for (let index = 1; index <= 10; index++) {
// if (index % 2 === 0) {
// // 是偶数了才输出
// console.log(index);
// }
// }
// for (let index = 1; index <= 10; index++) {
// if (index % 2 !== 0) {
// // 是奇数的话 就跳过这次循环
// continue
// }
// console.log(index);
// }
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ，就不再往下 循环了，就终止循环
if (index === 5) {
break;
}
// // index===5&&break // 不能简写 报错！！
console.log(index);
// if (index < 5) {
// console.log(index);
// }
console.log("代码调用的次数",index);
}
</script>
for-每天背多少单词案例
就是for的嵌套写法
<script>
/*
1 天 背5个
2 天 背5个
3 天 背5个
循环嵌套
要先分清楚 每一个嵌套各自的目的
1 第一个嵌套循环做什么用的
决定 要背 几 天单词
2 第二个嵌套循环做什么用的
决定 要背 几 个单词
1 先实现一遍 3天背5个单词的 需求
2 我希望 几天 背几个单词 可以由用户来决定
3天 = prompt()
5个 = prompt()
*/
for (let index1 = 1; index1 <= 4; index1++) {
document.write(`第${index1}天<br/>`);
// 第一天要背5个单词
// 执行5次背单词的 开始
for (let index2 = 1; index2 <= 9; index2++) {
document.write(`记住第${index2}个单词<br/>`);
}
// 执行5次背单词的 结束
}
</script>
每天背单词案例进阶
就是背多少天，每天背多少由用户通过输入框决定
<script>
// 4 和 9 要改成 用户的输入！！
// 4 表示天数
let day = +prompt('请输入天数');
// 9 表示单词个数
let num = +prompt('请输入背单词的个数');
for (let index1 = 1; index1 <= day; index1++) {
document.write(`第${index1}天<br/>`);
for (let index2 = 1; index2 <= num; index2++) {
document.write(`记住第${index2}个单词<br/>`);
}
}
</script>
五行五列的星星
往下几个案例都有联系的，做出一个等于做出全部
<script>
/*
要求 要输出
五行五列的星星
简化
1 输出 一行 一列的星星
2 输出 一行 5个星星
3 对2这个功能 重复 5次
for循环嵌套来实现
2层循环
第一层
第二层
*/
for (let index = 1; index <= 5; index++) {
// 一行输出5个星星
for (let index1 = 1; index1 <= 5; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
</script>
m行n列的星星 案例
<script>
// 获取行
let n = +prompt('请输入行数');
// 获取列
let m = +prompt('请输入列数');
// 第一层循环的5 表示 行
for (let index = 1; index <= n; index++) {
for (let index1 = 1; index1 <= m; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
</script>
倒三角星的星星 案例
<script>
/*
第一个循环 控制的 行数
现在需求
1 行数没有改变
2 列数 发生了变化！
要知道 改变列数 代码(5) index1<= 5
1 第一次循环 列数 ：1
2 第二次循环 列数 : 2
3 第三次循环 列数 : 3
4 发现 不能写死成 5 而是 换成一个变量
变量 可以实现 第一次循环 1 第二次循环 2
*/
for (let index = 1; index <= 5; index++) {
// 第二个循环中 判断条件 5 => index(第一层循环的变量值)
for (let index1 = 1; index1 <= index; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
</script>
输出九九乘法表 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-输出九九乘法表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span{
border: 1px solid #000;
padding: 10px 0 ;
width: 100px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<script>
/*
碰到 不会做的案例的时候 要怎么办
1 百度（最终的解决方案）
2 找和以前旧案例的联系！！！ 尽可能去找！！！
（相等于每一个案例对你来是，都是全新，没有得到 每一个案例的开发经验！）
4 拆解
5 分析 主次功能
分析：
1 比较主要的是里面的文字 该是让显示
（要从行来开 不要从列来看 ）
*/
// 第一个层循环的index 表示当前的行数
for (let index = 1; index <= 9; index++) {
for (let index1 = 1; index1 <= index; index1++) {
let num = index1 * index;
document.write(`<span> ${index1} * ${index} = ${num} </span>`);
}
document.write('<br/>');
}
</script>
</body>
</html>
