JavaScript之for循环打印九九乘法表小案例

最新推荐文章于 2023-09-19 11:01:25 发布

Dec_freedom

最新推荐文章于 2023-09-19 11:01:25 发布

阅读量722

点赞数 2

文章标签： javascript js 前端

本文链接：https://blog.csdn.net/Dec_freedom/article/details/105030051

版权

FOR 循环

和 while 和 do while 循环都不太一样的一种循环结构
道理是和其他两种一样的，都是循环执行代码
语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

也能提供一组有规律的数字

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
  // 这里写的是要执行的代码
  console.log(i)
}

// 控制台会依次输出 1 ~ 10

这个只是看起来不太舒服，但是用起来比较好用（使用最多的循环）

用for循环来实现几个小案例

九九乘法表

需求分析：

当 i = 1 的时候, j = 1
当 i = 2 的时候, j = 1 2
当 i = 3 的时候, j = 1 2 3
当 i 的 x 的时候, j 始终从 1 开始, 到 x 结束

思路

创建两个for循环
- 每个循环都是从1-9 的数字
- 且每次循环内循环都比外循环小
对接收内容的span标签添加样式

for(var i = 1; i <= 9; i++){
	for(var j = 1; j <=i; j++){
	// 给span标签添加样式，输出内容
    document.write('<span>' + j + ' * ' + i + ' = ' + i * j + '&nbsp;</span>')
    }
    document.write('</br>')
}

打印
在这里插入图片描述

打印等腰三角形

需求分析

第一行显示1个
第一行显示2个
第一行显示3个
…

思路

与九九乘法表的实现方法类似
不同的是，每组for循环只能依次递增/递减，因此需要用到两组for循环
第二组循环我们设置成递减，且最大长度需减一

//第一组循环
for(var i = 1; i <= 6; i++){
	for(var j = 1; j <= i; j++){
    	document.write("●")
    }    
    document.write("<br/>")
}
//第二组循环
for(var i = 1; i <= 5; i++){
	//j从i开始，小于等于5，循环递减
	for(var j = i; j <= 5; j++){
    	document.write("●")
    }    
    document.write("<br/>")
}