三行代码实现九九乘法表~

最新推荐文章于 2023-03-01 15:19:15 发布

Fairy_tutu

最新推荐文章于 2023-03-01 15:19:15 发布

阅读量604

点赞数 1

文章标签： javascript 前端开发语言 html5 css

本文链接：https://blog.csdn.net/Fairy_tutu/article/details/127414259

版权

这是一张九九乘法表~做到如上图所示,基本结构只需三行代码即可实现~

一.此时需引入js基础学习到的第一门编程语言---JavaScript~

二.观察九九乘法表不难得出以下规律:

1.每块区域都是 a * b = c 的结构,

2.行数号与列数相等(划重点!!!)

三.基于此,我们可以联想到js基础引入的一个很重要的概念,循环~~~(这可是个好登西!)

试想,忽视小块里(a * b = c)的内容,怎么用js生成以上结构呢?

把小块换成♥,在页面输出如下所示怎么完成呢?

重点来啦!!! 仔细观察,第1行有1个爱心,第2行有2个,第3行3个...依此类推,第9行有9个...

那我们是不是可以理解为,循环第一次,生成1个爱心,循环第二次,生成2个,第三次3个...

那么怎么实现呢??

单次循环肯定无法实现,那在循环里面再嵌套一个循环呢,让内部循环的条件与外部循环关联~

<script>
        for (let i = 1; i <= 9; i++) {
            document.write('<br>')
            for (let j = 1; j <= i; j++) {
                document.write('♥')
            }
        }
    </script>

外层i打印行,里层j打印列,让里层条件j < = i ,即当 i = 1时, j = 1 满足j < = i的条件,执行打印爱心代码,当 i++自增为2时, j = 1执行一次, j++自增为2时,也满足j < = i的条件,再执行一次,依此类推,当 i = 9时,里层代码执行9次..即外层循环一次,里层循环了九次~

九九乘法表也是如此~

把爱心换成 a * b = c 的结构, 继续寻找规律可以得出,a的值为列数,b的值为行数
如 : 第三行:1 * 3 = 3 , 2 * 3 = 6 , 3 * 3 = 9, 标记蓝色的3是九九乘法的行数3,未标记的则为一次递增的1,2,3列...

基于此,只需要把爱心的案例这一行document.write('♥') ,改为j * i 的乘积!!

    <script>
        for(let i = 1;i<=9;i++){
            document.write('<br>')
            for(let j = 1;j<=i;j++){                
                document.write(`${j}X${i}=${j*i}`)             
            }
        }
    </script>

如图:

芜湖~~只需三行代码,即实现了九九乘法表~~~(ps:换行不算嗷hh)

再给咱们乘法表美化下,就用咱们老本行CSS样式就好啦!

注意:给 js加样式,记得套标签哦,我这里就用span啦~

    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: rgb(181, 219, 147);
            border: 1px solid skyblue;
            text-align: center;
            line-height: 50px;
            margin: 3px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <script>
        for (let i = 1; i <= 9; i++) {
            document.write('<br>')
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j}X${i}=${j * i}</span>`)
            }
        }
    </script>
</body>

好啦! 这样就可以得到开篇的乘法表咯~~~

Fairy_tutu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三行代码实现九九乘法表~

外层i打印行,里层j打印列,让里层条件j < = i ,即当 i = 1时, j = 1 满足j < = i的条件,执行打印爱心代码,当 i++自增为2时, j = 1执行一次, j++自增为2时,也满足j < = i的条件,再执行一次,依此类推,当 i = 9时,里层代码执行9次..即外层循环一次,里层循环了九次~那我们是不是可以理解为,循环第一次,生成1个爱心,循环第二次,生成2个,第三次3个...仔细观察,第1行有1个爱心,第2行有2个,第3行3个...依此类推,第9行有9个...
复制链接

扫一扫