Jquery - 操作元素 -棋盤
My tip
如果看不到 codepen playground,請重新整理頁面
See the Pen 你的 CodePen 標題 by Retsnom on CodePen.
index.html
<ul id="board"></ul>
style.sass
html,body
width: 100%
height: 100%
display: flex
justify-content: center
align-items: center
background-color: #555
ul#board
width: 400px
height: 400px
display: flex
flex-wrap: wrap
list-style: none
padding: 0
li
flex: calc(100%/7)
height: calc(100%/7)
border: 1px solid #000
box-sizing: border-box
background-color: #eee
font-size: 15px
&.black
background-color: #222
color: white
img
width: 80%
script.js
$(function () {
for (let i = 0; i < 7 * 7; i++) {
$("#board").append($("<li>"));
}
$("#board li").text(function (index) {
return index;
});
$("#board li:even").addClass("black");
let imgurl =
"<img src='https://png.pngtree.com/png-vector/20240521/ourmid/pngtree-a-chess-piece-png-image_12502215.png'>";
$("#board li:nth-child(7n+3)").html(function (index) {
let isBlack = $(this).hasClass("black");
if (isBlack) {
return imgurl;
}
});
$("img:first").hide(1000, function () {
setTimeout(function () {
$("img:last").hide(1000);
}, 1000);
});
});
Please note
這個內容是來自吳哲宇老師的動畫互動網頁特效入門(JS/CANVAS)課程