h5部分
JS部分
CSS部分
页面效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.table{
/* 设置flex布局 */
display: flex;
justify-content: center;
align-self: center;
background: #FAE53E;
padding-top: 30px;
color: #FFFFFF;
position: relative;
}
#d1{
height: 400px;
}
#d2 div{
float:left;
width: 100px;
height: 30px;
background-color: #2F82FE;
border: 1px solid #FAE53E;
text-align: center;
line-height: 30px;
}
.btn{
/* 固定按钮在页面的位置 */
position: absolute;
top: 460px;
width: 200px;
height: 50px;
border: none;
border-radius: 50px;
color: #FFFFFF;
font-weight: 400;
background: #2F82FE;
}
</style>
<script>
function f1(){
var str = "";
// 外层循环控制行数
for(var i=1;i<=9;i++){
// 内嵌一层div盒子d2
str += "<div id ='d2'>";
// str = str + "<div id='d2>";
// 内层循环,控制每一行的个数即列数,j<=i
for(var j=1;j<=i;j++){
// 在d2下再内嵌一层包含式子单元格
str += "<div>";
str += j+"x"+i+"="+i*j;
str += "</div>";
}
// 实现每个乘法式子单元格换行,并且与d2开头的div完全闭合
str += "<br/></div></br>";
}
// innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;
// 这里为对象插入内容str
document.getElementById("d1").innerHTML = str;
}
</script>
</head>
<body>
<div class="table">
<div id="d1"></div>
<!-- 写一个提交按钮,添加onclick点击事件 -->
<input class="btn" type="button" value="for生成99乘法表" onclick="f1()">
</div>
</body>
</html>