今天做JavaScript作业的时候遇到了一个很有意思的题,编写代码实现一个8行8列的黑白棋盘格。其实也就是一个8*8的棋盘,虽然想起来有点难,但是做起来还是很容易的。8行8列的黑白棋盘格一开始没有想到document.write里可以输出属性,是我思维固化了,学的还是不精。
我先是通过百度进行查询,发现并没有这个的答案,没有查到结果的我只好自己想着写了。
首先我是想到了使用document.write('<table>')来写表格的,但是后来发现加的css属性并没有应用上去,一开始我以为应该是因为document.write是在页面加载完之后才开始加载的吧,后来发现其实是因为table标签要加上宽度以及颜色和网格样式

例如border: 1px solid blue;

然后看到其实td也应该加上样式,如上面的border: 1px solid blue;

虽然这样我通过css和document.write结合起来可以把样式修改了,但是没办法控制让他一黑一白分布。我一开始想到的是能否控制js让他输出的td标签上加上class或者id这样我可以设置两个id一个颜色为白一个颜色为黑,但是后来百度查询发现并没有,要不就是有点小难的,但是由于其实js我们课程才是刚刚开,不应该这么难,所以我灵机一动,是否可以在document.write('<table>')里<table>标签上加上东西,没想到一一试就成功了,之后用if判断行数来执行不同的for循环就能得到一个黑白8*8的棋盘了。由于时间原因并没有加其他的样式,有需要可以自行添加。毕竟老师只要棋盘即可。

<script>
document.write("<table border='1px'>")
for(var i =0;i<8;i++){
document.write("<tr>");
if(i%2==0){
for(var b=0;b<8;b++){
if(b%2!=0){<br/>
document.write("<td style='width:50px;height:50px'>");
document.write("</td>");
}
else{
document.write("<td style='background-color: black;width:50px;height:50px'>");
document.write("</td>");
}
}
}
else{
for(var b=0;b<8;b++){
if(b%2==0){
document.write("<td style='width:50px;height:50px'>");
document.write("</td>");
}
else{
document.write("<td style='background-color: black;width:50px;height:50px'>");
document.write("</td>");
}<br/>
}<br/>
}<br/>
document.write("</tr>");
}<br/>
document.write("</table>")
</script>
最后修改:2021 年 04 月 20 日 04 : 54 PM
如果觉得我的文章对你有用,请随意赞赏