Home > Article > Web Front-end > JS implements chessboard coverage

JS implements chessboard coverage

php中世界最好的语言Original: 2018-04-18 16:48:132065browse

This time I will bring you JS to implement chessboard coverage. What are the precautions for JS to implement chessboard coverage? The following is a practical case, let’s take a look.

I did an algorithm assignment before, called chessboard coverage, which originally needed to be written in C language, but because my C language is half-baked (haha), I simply changed the C language writing method on the Internet to

JavaScriptWriting method and display its coverage effect

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>算法作业2</title>
<style type="text/css">
  #num{}
  #chess{
    margin-top:20px;
    }
</style>
</head>
<body>
  <p id="num">
    <p>设置棋盘大小：
      <input type="text"name="Num"size="4"/>
    </p>
    <p>请输入特殊方格的位置：</p>
    <p>
    x:<input type="text"name="X"size="25"/><br />
    y:<input type="text"name="Y"size="25"/>
    </p>
    <p>
      <input type="button"value="设置棋盘参数"/>
      <input type="button"value="生成棋盘"/>
    </p>
  </p>
  <p id="chess">
  </p>
</body>
</html>
<script type="text/javascript">
  window.onload=function()
  {//棋盘设置
    varchess=document.getElementById('chess');
    varinput=document.getElementsByTagName('input')[3];
    input.onclick=function()
    {
      varN=document.getElementsByTagName('input')[0].value;
      vartable=document.createElement('table');
      chess.appendChild(table);
      table.style.border='2px solid';
        table.style.borderCollapse='collapse';
      for(vari=0;i<N;i++)
      {
        vartr=document.createElement(&#39;tr&#39;);
        table.appendChild(tr);
        tr.style.height ="20px";
        tr.style.border=&#39;1px solid #ccc&#39;;
        for(varj=0;j<N;j++)
        {
          vartd=document.createElement(&#39;td&#39;);
          tr.appendChild(td);
          td.style.width ="20px";
          td.style.border=&#39;1px solid #ccc&#39;;
        }
      } 
    }
    varOut=document.getElementsByTagName(&#39;input&#39;)[4];
    varMatrix =newArray();  
    for(vari=0;i<100; i++)
    {//初始化棋盘矩阵
        Matrix[i] =newArray(); 
        for(varj=0;j<100;j++)
      {
         Matrix[i][j]=0;
        }
    }
    Out.onclick=function()
    {//棋盘生成
      varr,c;
      varX=document.getElementsByTagName(&#39;input&#39;)[1].value;
      varY=document.getElementsByTagName(&#39;input&#39;)[2].value;
      varN=document.getElementsByTagName(&#39;input&#39;)[0].value;
      chessBoard(0,0,X-1,Y-1,N);
      for(r = 0; r < N; r++)
      {
        for(c = 0; c < N; c++)
        {
           varq=Matrix[r][c];
           vartable=document.getElementsByTagName(&#39;table&#39;)[0];
           table.rows[r].cells[c].style.background=&#39;rgb(&#39;+13*q%256+&#39;,&#39;+43*q%256+&#39;,&#39;+73*q%256+&#39;)&#39;;
        }
      }
    }
    varnCount = 0;
    functionchessBoard(tr,tc,dr,dc,size)
    {
      vars,t;
      if(size == 1)return;
      s =size/2;
      t = ++nCount ;
      if(dr < tr + s && dc < tc +s)
        chessBoard(tr,tc,dr,dc,s);
      else
      {
        Matrix[tr+s-1][tc+s-1] = t;
        chessBoard(tr,tc,tr+s-1,tc+s-1,s);
      }
      if(dr < tr + s && dc >= tc + s )
        chessBoard(tr,tc+s,dr,dc,s);
      else
      {
        Matrix[tr+s-1][tc+s] = t;
        chessBoard(tr,tc+s,tr+s-1,tc+s,s);
      }
      if(dr >= tr + s && dc < tc + s)
        chessBoard(tr+s,tc,dr,dc,s);
      else
      {
        Matrix[tr+s][tc+s-1] = t;
        chessBoard(tr+s,tc,tr+s,tc+s-1,s);
      }
      if(dr >= tr + s && dc >= tc + s)
        chessBoard(tr+s,tc+s,dr,dc,s);
      else
      {
        Matrix[tr+s][tc+s] = t;
        chessBoard(tr+s,tc+s,tr+s,tc+s,s);
      }
    }
  }
</script>

I refer to the C language code for chessboard coverage from the textbook. In order to use it in JavaScript, the breakthrough is

two-dimensional arrayMatrix[][]. As long as the data of the entire array after its calculation can be obtained, then There is an idea. Remember that the data filled in the form is obtained after clicking the button, so the code for obtaining the element node must be placed in onclick.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

JS implements chessboard coverage

Related articles