多种方法用javascript输出黑白棋

学到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( '

');

} else{

document.write( '

');

}

}

document.write( "
");

}

方法二：

for( var i= 0;i< 8;i++){

for( var j= 0;j< 8;j++){

if( (j+i)% 2 == 0 ){

//0行+0列=0 偶数 黑

document.write( '

');

} else{

//0行 + 1列 =1 奇数 白

//1行 + 0列 =1 奇数 白

document.write( '

');

}

}

document.write( "
");

}

方法三：（这个方法没有很灵活）

样式：这里给每个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( '

');

} else{

document.write( '

');

}

}

} else{

//奇数行

for( var i= 0;i< 8;i++){

if(i% 2 == 0){

document.write( '

');

} else{

document.write( '

');

}

}

}

document.write( "
");

}