主页 / 问题 / 597561
Accepted
Karen Hovhannisyan
Asked:2020-11-30 13:46:21 +0000 UTC2020-11-30 13:46:21 +0000 UTC

如何画一个简单的棋盘？

  • 772

如何用html/css和javascript绘制一个简单的棋盘？

javascript

3 个回答

  1. Best Answer

    一个简单的例子。

    var chessWrap = document.querySelector('.ch-wrap');

var i = 0, count = 0;

while (count < 8 * 8) {
  var item = document.createElement('div');
  chessWrap.appendChild(item);

  item.classList.add('ch-item');

  if (i && i % 2)
    item.classList.add('ch-black')

  i += ((i + 2) % 9) ? 1 : 2;
  count++;
}
    .ch-wrap {
  width: 400px;
  height: 400px;
  border: 1px solid #111;
}
.ch-item {
  width: 50px;
  height: 50px;
  float: left;
}
.ch-black {
  background: #111;
}
    <div class="ch-wrap"></div>

    • 16

  2. 在 Chrome 54 和 Firefox 50 中测试。一般情况下：

    html {
  background: white;
  display: flex;
}

body {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
  border: 1px solid red;
  box-sizing: border-box;
  background: repeating-linear-gradient(90deg, white, white 12.5%, black 12.5%, black 25%);
}

div {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(0deg, black, black 12.5%, white 12.5%, white 25%);
  mix-blend-mode: difference;
}
    <div></div>

    • 13 
  3. function shahmatLine(number){
    let summ = '';
    if(number % 2 == 0){
       for(let k=0; k<8; k++){
            summ = summ + " " + "#";
        } 
    }
    else{
        for(let k=0; k<8; k++){
            summ = summ + "#" + " ";
        } 
    }

    return summ;
}


function Shahmat(lineCount) {
    for(let i = 0; i < lineCount; i++){
        console.log(shahmatLine(i));
    }
}
    • 0

相关问题