主要练习:
代码赏析:
<!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.设置盒子大小 居中 */
.box{
width:
500px;
height:
500px;
border:
1px
solid
black;
margin:
20px
auto;
text-align:
center;
}
<
/style>
<script>
// 3.window加载
window.onload =
function(){
// 4.获取元素信息
var oDiv = document.getElementById(
"div1");
// 5.创建变量,接收星星
var sStr =
"";
// 6 遍历 循环 每行出星星
for(
var i=
0;i<
20;i++){
for(
var j=
0;j<i;j++){
sStr +=
"*";
}
sStr +=
"<br>";
}
// 7.遍历 循环之外 改变盒子内部内容
oDiv.innerHTML = sStr;
}
<
/script>
</head>
<body>
<!-- 1.搭建盒子,创建框架 -->
<div
class=
"box"
id=
"div1"
></div>
</body>
</html>