几种黑白相间的棋盘实现方法

方法一：用 DIV 实现

<style>.black-cell{width:50px;height:50px;background: #000;position: absolute;top:0;left:0;}
</style><div id="qipan" style="width:400px;height:400px;border:1px solid #aaa;background:#fff; position: relative;"></div><script>    var frag = document.createDocumentFragment();    for (var line = 0; line < 8; line++) {for (var column = 0; column < 8; column++) {if ( (column+line) % 2 != 0) {var div =  document.createElement("div");div.setAttribute("class", "black-cell");div.style.top = (line*50) + "px";div.style.left = (column*50) + "px";frag.appendChild(div);} }}document.getElementById("qipan").appendChild(frag);
</script>

方法二：利用原生表格实现

<table id="t1" cellspacing="0" cellpadding="0" border=1></table><script>var t1 = document.getElementById("t1");var str = ""for (var i =0; i<8; i++) {str += "<tr>";for(var j = 0; j<8; j++){if((i+j)%2 !== 0){str += "<td style='width:50px;height:50px;background:#000;'></td>";}else{str += "<td style='width:50px;height:50px;'></td>";}               }str += "</tr>";}t1.innerHTML = str;
</script>

方法三：利用 ES6 实现

<style>.row>span{display: inline-block;text-align: center;width:50px;height:50px;}.black{background: #000;}div .row{height:50px;}
</style>
<body><div id="board" ></div><script>                function row(value=''){const array = new Array(8);array.fill(value);return array;}function allcells(value=''){return Array.from({length:8},() =>row(value)); }const table = allcells();const cells = table.map((rows, i)=>rows.map((cell, j)=>{if ((i+j) % 2 != 0){return $("<span>").addClass("black").text(cell);} else{return $("<span>").text(cell);}                   }));const rowsTodiv = cells.map(spans=>{return $("<div>").addClass("row").append(spans)});$("#board").append(rowsTodiv);</script>
</body>

最后截一张实现完成的图片：

几种黑白相间的棋盘实现方法相关推荐

OpenGL结合书中画苍蝇对位图的思考——镂空效果的实现以及利用位图实现用黑白相间的棋盘图案填充多边形
原理及重要函数说明其实在画虚线和点划线时就已经利用16进制的每位来代表线段的一部分是开还是关(转换为二进制后也就是1画,0不画),这里的道理类似,只不过因为是绘制平面所以规则更多,但原理和画线一样. ...
试用OpenGL实现用黑白相间的棋盘图案填充图形
计算机图形学第五次实验试用OpenGL实现用黑白相间的棋盘图案填充图形一. 实验目的学会在OpenGL中写程序: 学会用OpenGL实现用黑白相间的棋盘图案填充多边形. 二. 实验内容用Open ...
用openGL实现用黑白相间的棋盘图案填充多边形
#include<gl/glut.h> #include<windows.h> int n=0; float a0=200,b0=200,a1=400,b1=20
用手刻出计算机系统,一种计算机模拟手工雕刻制版的方法
主权项: 权利要求书\r\r\r\r\n1.一种计算机模拟手工雕刻制版的方法,包括以下步骤:\r\r\r\r\n(1)根据原图制作图象版画:\r\r\r\r\n(2)出胶片:\r\r\r\r\n(3) ...
角点检测 c语言棋盘格,一种棋盘格角点全自动检测方法与流程
本发明属于图像处理与计算机视觉领域,特别涉及一种棋盘格角点全自动检测的方法. 背景技术: 棋盘格角点作为一种特殊的角点在相机标定中具有广泛的应用,扮演着相当重要的角色.棋盘格图案由于对比度明显,特征简 ...
钢琴为什么设计成两排，并且黑白相间 (认识钢琴)
先上一张图这是五线谱和钢琴琴键的映射关系大家请看,这里有这么多的琴键,每个琴键(黑白)依次半音升高,这里仅仅6个八度,大概70多个键试想,如果琴键只有一排(同样大小的一排),同样88键的钢琴,得 ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
20种看asp源码的方法及工具
作者:欧杨飘雪 http://blog.csdn.net/flyingsnowy/ 众所周知windows平台漏洞百出,补丁一个接一个,但总是补也补不净.我把我所知道的20种看asp源码的方法总结了 ...

几种黑白相间的棋盘实现方法

几种黑白相间的棋盘实现方法相关推荐

最新文章

热门文章