学到for循环必定少不了多刷题~
方法一、方法二样式：这里用了display，会产生一条缝隙，是根据根字体大小确定的，因此设置font-size:0;
*{
margin:
0;
padding:
0;
font-size:
0;
}
.black{
width:
30px;
height:
30px;
background: black;
display: inline-block;
border:
1px solid black;
}
.white{
width:
30px;
height:
30px;
background: white;
display: inline-block;
border:
1px solid black;
}
方法一：
/* j
i 0行0列 0行1列 0行2列 0行3列 0行4列....
1行0列 1行1列 1行2列 1行3列 1行4列
2行0列 2行1列 2行2列 2行3列 2行4列
3行0列 3行1列 3行2列 3行3列 3行4列
.
.
.
*/
for(
var i=
0;i<
8;i++){
for(
var j=
0;j<
8;j++){
//
if((i%
2==
1 && j%
2==
1) || (i%
2==
0 && j%
2==
0)){
document.write(
'<div class="black"> </div>');
}
else{
document.write(
'<div class="white"> </div>');
}
}
document.write(
"<br/>");
}
方法二：
for(
var i=
0;i<
8;i++){
for(
var j=
0;j<
8;j++){
if( (j+i)%
2 ==
0 ){
//0行+0列=0 偶数 黑
document.write(
'<div class="black"> </div>');
}
else{
//0行 + 1列 =1 奇数 白
//1行 + 0列 =1 奇数 白
document.write(
'<div class="white"> </div>');
}
}
document.write(
"<br/>");
}
方法三：（这个方法没有很灵活）
样式：这里给每个divfloat，所以限制了body宽度
body{
width:
240px;
}
.black{
width:
30px;
height:
30px;
background: black;
float:left;
}
.white{
width:
30px;
height:
30px;
background: white;
float:left;
}
for(
var j=
0;j<
8;j++){
if(j%
2 !==
0){
//偶数行
for(
var i=
0;i<
8;i++){
if(i%
2 ==
0){
document.write(
'<div class="black"> </div>');
}
else{
document.write(
'<div class="white"> </div>');
}
}
}
else{
//奇数行
for(
var i=
0;i<
8;i++){
if(i%
2 ==
0){
document.write(
'<div class="white"> </div>');
}
else{
document.write(
'<div class="black"> </div>');
}
}
}
document.write(
"<br/>");
}