Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 日常学习 > Javascript编写代码实现一个8行8列(8*8)的黑白棋盘格

Javascript编写代码实现一个8行8列(8*8)的黑白棋盘格

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

例如border1px solid blue;
然后看到其实td也应该加上样式,如上面的border1px 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){
                        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>");
                    }
                }
                }
                document.write("</tr>");
            }
            document.write("</table>")
        </script>


版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/rcxx/7.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0