利用javascript实现九九乘法表

逃离我推掉我的手 2022-03-27 14:19 168阅读 0赞

乘法表这种面试经常遇到的题目必须要牢记于心啊，两个for循环众人皆知，下面来看一下用JS怎么实现吧

具体思路：**竖向看大循环1至9，横向看每行都有一个小循环，小循环与每行的序号有关联（限制条件）。**

** for循环i=多少看起始的第一项的i值为多少，限制条件大都看最后一项。**

首先CSS：

* {
    			margin: 0;
    			padding: 0;
    		}
    
    		li {
    			list-style-type: none;
    		}
    
    		a {
    			text-decoration: none;
    		}
    
    		li:after {
    			display: block;
    			clear: both;
    			content: "";
    		}
    
    		span {
    			display: inline-block;
    			width: 50px;
    			height: 20px;
    			padding: 10px;
    			border: 1px solid;
    			margin: 5px;
    		}

主要结构：

let str = ""
 for (let i = 1; i <= 9; i++) {
 for (let k = 1; k <= i; k++) {
 	str +=`${i}*${k}=${i*k}`
 }
 str += ' '
 
 }
 wrap.innerHTML = str

实现效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70][]

如果想实现反向的乘法表，那么改一下二级for循环的限制条件就行了：

let str = ""
 for (let i = 1; i <= 9; i++) {
 for (let k = i; k <= 9; k++) {
 	str +=`${i}*${k}=${i*k}`
 }
 str += ' '
 
 }
 wrap.innerHTML = str

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70]: /images/20220327/b1502b5ccf534cc39ddb750db480a784.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 1]: /images/20220327/b3b203ca50ca43c6b97d4c4d353875d9.png