闲来无事，想学习点东西，而最近又在玩数独，于是乎准备使用各种技术折腾一个数独的小游戏。
下面是最简单的，数独原型。还在不断完善中。
<!DOCTYPE html>
<html>
<head>
<title>数独</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
html,body{height: 100%;user-select: none;}
.container{height: 100%;}
.flex-center{
margin-top: 100px;
height:auto;
display:flex;
justify-content: center;
align-items: center;
}
.sudu-container{
width: 450px;
height: 450px;
border: 1px solid #ddd;
box-sizing: content-box;
border-bottom: none;
}
.sudu-container :nth-child(9n){border-right: 0px;}
.sudu-item{
width: 50px;
height: 50px;
box-sizing: border-box;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
float: left;
cursor: pointer;
line-height: 50px;
text-align: center;
font-weight: 700;
font-size: 20px;
}
.sudu-item.active {
background-color: #E6A23C;
color: #fff;
}
.wait-number {display: block;width: 100%;margin: 0 auto;}
.wait-number .number-ul{
list-style: none;
text-align: center;
width: auto;
display: flex;
justify-content: center;
padding: 0;
margin-top: 20px;
}
.wait-number .number-ul li{
float: left; width: 50px;
height: 50px;
box-sizing: border-box;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
float: left;
cursor: pointer;
line-height: 50px;
text-align: center;
font-weight: 700;
font-size: 20px;
}
.wait-number .number-ul :first-child{
border-left: 1px solid #ddd;
}
.wait-number .number-ul li:hover{
background-color: #909399;
color: #fff;
}
.wait-number .number-ul li.active{
background-color: #E6A23C;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-center">
<div class="sudu-container">
<div class="sudu-items-container" id="J_sudu_items">
<!-- <div class="sudu-item" data-index="0"></div> -->
</div>
</div>
</div>
<div class="wait-number">
<ul class="number-ul" id="J_number_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<script>
let currentIndex = null
let suduDataArr = new Array(81).fill(null)
let dataString = '1, , 3, 5'
let suduContainerEl = document.querySelector("#J_sudu_items")
let suduItem = [] // new Array(81).fill('<div class="sudu-item"></div>')
for(let i = 0; i < 81; i++) {
suduItem.push(`<div class="sudu-item" data-index="${i}"></div>`)
}
suduContainerEl.innerHTML = suduItem.join('\n')
suduDataArr[1] = 1
suduDataArr[20] = 5
suduDataArr[30] = 3
suduDataArr.forEach((outerItem, outerIndex) => {
if (outerItem) {
suduContainerEl.querySelector(`.sudu-item:nth-child(${outerIndex+1})`).innerHTML = outerItem
}
})
// 初始化数据
function initData () {
}
// 渲染数据到view
function renderDataOnView () {
}
// 点击底部数字
function clickNumberItem (even) {
let targetEl = even.target
suduContainerEl.querySelector(`.sudu-item:nth-child(${ currentIndex + 1})`).innerHTML = targetEl.innerHTML
}
// 点击数独区域
function clickSuduNumberItem (even) {
let targetEl = even.target
if(!targetEl.classList.contains('active')) {
let activeItem = document.querySelector("#J_sudu_items .active")
if(activeItem && activeItem.classList.contains('active')) {
activeItem.classList.remove('active')
}
targetEl.classList.add('active')
}
currentIndex = parseInt(targetEl.dataset.index, 10)
}
document.querySelector("#J_number_ul").addEventListener('click', clickNumberItem, false)
document.querySelector("#J_sudu_items").addEventListener('click', clickSuduNumberItem, false)
</script>
</body>
</html>复习了以下知识，
classList的remove， add，contains
css中 flex， box-sizing ， ：nth-clild， ：nth-clild（9n）
new Array（10）.fill('<div>123</div>')
addEventListener(evenName, func, Bloean)
