效果图
代码
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>99乘法表</title>
<style>
body{
margin: 0;
padding: 0;
background: url("baiye/img1\ \(1\).jpg") no-repeat;
background-size: cover;
}
table{
width: 900px;
height: 550px;
}
tr{
background: #000;
}
td{
text-align: center;
border: 1px solid red;
color: royalblue;
}
</style>
</head>
<body>
<script>
//编写表格
document.write("<table align='center'>")
//1.完成基本的for循环嵌套,展示乘法表 外层循环循环行数
for (var i = 1; i <= 9; i++) {
document.write("<tr>")
//嵌套循环,内层循环循环的是单元格
for (var j = 1; j <= i; j++) {
//单元格
document.write("<td>")
//输出打印 1* 1 = 1
document.write(i + "*" + j + "="+(i * j)+" ");
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>