国际象棋棋盘
我们在这里做一个简单的应用,我们将之前学过的JavaScript,HTML5,CSS进行简单应用。
首先,我们知道,国际象棋棋盘是由8*8 64个格子组成的。所以我们要用表格画出64个方块。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid #000000;/*边框大小和颜色*/
border-collapse: collapse;/*边框样式*/
}
td{
border: 1px solid #000000;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table cellpadding='0' width='200' height='200'>");
for(var i=0;i<8;i++){
document.write("<tr>");
for (var j=0;j<8;j++) {
document.write("<td>");
document.write("</td>");
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>
因为棋盘是黑白相间的。
所以我们用js语句控制
for(var i=0;i<8;i++){
document.write("<tr>");
if(i%2==0){
for (var j=0;j<8;j++) {
if(j%2==0){
document.write("<td bgcolor='#FFFFFF'>");
document.write("</td>");
}else{
document.write("<td bgcolor='#000000'>");
document.write("</td>");
}
}
}else
for (var j=0;j<8;j++) {
if(j%2==0){
document.write("<td bgcolor='#000000'>");
document.write("</td>");
}else{
document.write("<td bgcolor='#FFFFFF'>");
document.write("</td>");
}
}
document.write("</tr>")
}