话不多说,我们直接上代码:请看
<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} `);
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 决定个数,再加上我给乘法表加了点儿样式,得到了如下图所示的效果: