for循环嵌套以99乘法表为例
源码如下：
<style type="text/css">
#wrap{
width: 800px;
border-bottom: 1px dashed #CCCCCC;
padding-bottom: 10px;
}
#wrap span{
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid cornflowerblue;
margin: 2px;
text-align: center;
line-height: 40px;
font-family: arial;
font-size: 18px;
}
</style>
</head>
<body>
<div id="wrap">
<!--<span id="">
1*1=1
</span>-->
</div>
<script type="text/javascript">
let oWrap = document.getElementById("wrap");
let s="";
for (let i=1;i<10;i++) {
//根据当前行数，生成不同个的span
let hh="";
//行号
for (let j=1;j<=i;j++) {
//ES5
hh +="<span>"+i+"*"+j+"="+i*j+"</span>";
//ES6模板字符串
//hh += `<span> ${i}*${j}=${i*j} </span>`;
}
hh += "<br/>";//每行结束的换行符
s += hh;
}
s += "<hr><hr>";
for (let i=1;i<10;i++) {
let hh="";
for (let j=i;j<=9;j++) {
//ES6模板字符串
hh += `<span> ${i}*${j}=${i*j} </span>`;
}
hh += "<br/>";//每行结束的换行符
s += hh;
}
s += "<hr><hr>";
for (let i=9;i>0;i--) {
let hh="";
for (let j=1;j<=i;j++) {
//ES6模板字符串
hh += `<span> ${i}*${j}=${i*j} </span>`;
}
hh += "<br/>";//每行结束的换行符
s += hh;
}
oWrap.innerHTML = s;
</script>
</body>
最终结果如下
