下面展示一些 内联代码片
。
// html
<div id="wangmeng"></div>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
ul {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
li {
position: relative;
perspective: 1200;
transform-style: preserve-3d;
}
div {
border: 1px solid gray;
position: absolute;
text-align: center;
line-height: 100px;
backface-visibility: hidden;
}
li div:nth-child(2) {
transform: rotatey(-180deg);
}
.one {
transition: all 2s;
transform: rotatey(-180deg);
}
.two {
transition: all 2s;
}
// An highlighted block
let wm = document.getElementById("wangmeng");
wm.style.width = 400 + 'px'
wm.style.height = 400 + 'px'
var num = 0,
arr = [],
nums = 0,
ii = 0,
time = null
//创建div
function main(h, w, c, id) {
this.width = w
this.height = h
this.color = c
this.id = id
}
main.prototype.add = function() {
//创建ul
const ul = document.createElement('ul');
ul.style.width = this.width + 'px'
ul.style.height = this.height + 'px'
ul.style.backgroundColor = this.color
this.id.appendChild(ul)
return function lis(ws, hs, cs) {
//创建li
this.li = document.createElement('li')
this.li.style.width = ws + 'px'
this.li.style.height = hs + 'px'
this.li.style.backgroundColor = cs
ul.appendChild(this.li)
return this.li
}
}
main.prototype.div = function() {
//创建2个相同的div
const div = document.createElement('div');
div.style.width = li.style.width
div.style.height = li.style.height
li.appendChild(div)
return div
}
function init() {
//初始化
var s = new main(400, 400, '', wm)
var adds = s.add()
for (let i = 0; i < 16; i++) {
//创建 li
var li = adds(100, 100, '')
for (let j = 0; j < 2; j++) {
//创建div
s.div()
}
}
divs = document.querySelectorAll("li div:last-child");
divfir = document.querySelectorAll("li div:first-child");
this.suiji.call(this)
}
init.prototype.clicks = function() {
for (let i = 0; i < divfir.length; i++) {
divfir[i].addEventListener('click', btn.bind(this, i))
}
}
function deletes(bool) {
for (let i = 0; i < divfir.length; i++) {
if (bool) {
divfir[i].style.pointerEvents = 'none'
} else {
divfir[i].style.pointerEvents = 'auto'
}
}
}
function btn(i) {
divs[i].className = 'two'
divs[i].style.transform = 'rotatey(0deg)'
divfir[i].className = 'one'
if (ii != i) {
num++;
}
console.log(num)
if (num == 2) {
deletes(true)
if (nums != arr[i]) {
clearInterval(time)
time = setTimeout(function() {
fz(divfir, divs, ii)
fz(divfir, divs, i)
num = 0
deletes(false)
}, 1500)
} else {
time = setTimeout(function() {
divs[i].style.backgroundColor = 'pink'
divs[ii].style.backgroundColor = 'pink'
deletes(false)
}, 1000)
num = 0
}
} else {
nums = arr[i]
ii = i
}
}
function fz(a, b, iis) {
a[iis].className = ""
b[iis].className = ""
a[iis].className = 'two'
b[iis].className = 'two'
a[iis].style.transform = 'rotatey(0deg)'
b[iis].style.transform = 'rotatey(-180deg)'
}
init.prototype.suiji = function() {
arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.forEach(function(val) {
arr.push(val)
})
arr.sort(function(a) {
return a - Math.random() * 9
})
for (let j = 0; j < divs.length; j++) {
divs[j].innerText = arr[j]
}
}
var ss = new init;
ss.clicks()