js 实现九九乘法口诀

话不多说,我们直接上代码:请看

<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Document</title>    
    <style>
            div{      
                  background-color: hotpink;            
                  width: 800px;        
                }        
              a{            
                  width: 80px;            
                  color: yellow;            
                  display:inline-block;            
                  padding: 10px 0px;            
                  border: 1px solid yellow;            
                  text-align: center;            
                  margin: 2px;        
                }    
    </style>
    </head>
    <body>
        <script>        
        document.write(`<div>`)        
        var number = 1;        
        var sb = 1;        
        for(number = 1; number <= 9; number++){
                    for(sb = 1;sb <= number;sb++){
                                   document.write(`<a hreg="#">`)                
                                   document.write(`${sb}x${number}=${sb * number}&nbsp;`);                
                                   document.write(`</a>`)            
                    }document.write(`<br>`);        
        }
       </script>
  </body>

我们来理一理思绪哈!
首先,执行第一次时,外循环 number 是 1;所以我们的内循环是 ——> for(sb = 1;sb <= 1;sb++);执行一次内循环里面的内容,得到的是 1 x 1 = 1。跳出内循环后,外循环有一个换行命令.
执行第二次循环 number 是2;内循环执行两次——> for(sb = 1;sb <= 2;sb++);执行2次内循环里面的内容,得到的是 1x 2=2 2x2=4。换行
执行第三次循环 number 是3;内循环执行两次——> for(sb = 1;sb <= 3;sb++);执行3次内循环里面的内容,得到的是 1x 3=3 2x3=6 3x3=9。换行
。。。。。。
依次类推,我们可以得到9行,每行的内容根据外循环的 number 决定个数,再加上我给乘法表加了点儿样式,得到了如下图所示的效果:
乘法表效果图

发布了10 篇原创文章 · 获赞 11 · 访问量 446

猜你喜欢

转载自blog.csdn.net/Anber_wang/article/details/104860373
今日推荐