练习一下表格,利用Javascript制作出来:
代码赏析:
<!DOCTYPE html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>Document
</title>
<style>
/* 2.设置背后盒子大小 居中 */
div{
width:
80px;
height:
40px;
border:
1px
solid
black;
line-height:
40px;
text-align:
center;
display:
inline-block;
/* 边框重合 需要设置 */
margin-left:
-1px;
margin-top:
-1px;
}
<
/style>
<script>
// 3.window加载
window.onload =
function(){
// 4.获取元素信息
var oDiv = document.getElementById(
"body01");
// 5.创建变量
var sStr =
"";
// 6 遍历 循环 拼接
for(
var i=
1;i<
10;i++){
for(
var j=
1;j<i;j++){
sStr +=
"<div>" + j +
"×" + i +
"=" + j*i +
"</div>";
}
sStr +=
"<br>";
}
// 7.遍历 循环之外 改变盒子内部内容
oDiv.innerHTML = sStr;
}
<
/script>
</head>
<body
id=
"body01"
>
<!-- 1.body需要获取元素,所以设置id -->
</body>
</html>