-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (127 loc) · 4.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cards {}
.card-outer {
float: left;
width: 25%;
display: block;
padding: 5px;
box-sizing: border-box;
}
.card {
border-radius: 5px;
border-width: 2px;
border-style: solid;
border-color: gray;
box-sizing: border-box;
display: inline-block;
min-height: 408px;
}
.card-surname {
cursor: pointer;
}
.card.selected {
border-color: red;
}
.card .node {
width: 11.1111%;
float: left;
text-align: center;
}
.card .node .number {
font-size: 12px;
}
.card .node .name {
font-size: 28px;
font-weight: 900;
}
#result-box .card {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="cards">
</div>
<script>
const surnames = '王李张刘陈杨黄吴赵周徐孙马朱胡林郭何高罗郑梁谢宋唐许邓冯韩曹曾彭萧蔡潘田董袁于余叶蒋杜苏魏程吕丁沈任姚卢傅钟姜崔谭廖范汪陆金石戴贾韦夏邱方侯邹熊孟秦白江阎薛尹段雷黎史龙陶贺顾毛郝龚邵万钱严赖覃洪武莫孔汤向常温康施文牛樊葛邢安齐易乔伍庞颜倪庄聂章鲁岳翟殷詹申欧耿关兰焦俞左柳甘祝包宁'.split('').slice(0, 126);
function makeCards(surnames) {
const numbers = [];
for (let i = 1; i < 127; i++) {
numbers.push(i);
}
return [
numbers.filter((d) => { return (d >> 0) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 1) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 2) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 3) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 4) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 5) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}}),
numbers.filter((d) => { return (d >> 6) & 0b1 === 1; }).map((d) => { return {surname: surnames[d - 1], value: d}})
];
}
const cards = makeCards(surnames);
const root = document.querySelector('#cards');
for (let i = 0; i < cards.length; i++) {
const card = cards[i];
const outer = document.createElement('div');
outer.classList.add('card-outer');
const item = document.createElement('div');
item.id = `card-${i+1}`;
item.classList.add('card');
item.classList.add('card-surname')
item.dataset['order'] = i + 1;
for (const {surname, value} of card) {
const node = document.createElement('div');
node.classList.add('node');
const num = document.createElement('div');
num.classList.add('number');
num.textContent = value;
node.appendChild(num)
const name = document.createElement('div');
name.classList.add('name');
name.textContent = surname;
node.appendChild(name);
item.appendChild(node);
}
outer.appendChild(item);
root.appendChild(outer);
}
const resultBox = document.createElement('div');
resultBox.id = 'result-box';
resultBox.classList.add('card-outer');
resultBox.innerHTML = `<div class="card"><div>请选择中带有你姓氏的所有卡片</div><div class="node"><div class="number"></div><div class="name"></div></div></div>`;
root.appendChild(resultBox);
function closest(node, matcher) {
let parent = node.parentElement;
while (!matcher(parent)) {
parent = parent.parentElement;
}
return parent;
}
root.addEventListener('click', function(e) {
console.log('click');
const cardNode = closest(e.srcElement, (node) => {
return Array.from(node.classList).includes('card-surname');
});
cardNode.classList.toggle('selected');
const result = Array.from(root.querySelectorAll('.card.selected')).reduceRight((pre, d) => {
return pre + (1 << (parseInt(d.dataset['order'], 10) - 1));
}, 0);
if (result > 0) {
resultBox.querySelector('.card .name').textContent = surnames[result - 1];
resultBox.querySelector('.card .number').textContent = result;
} else {
resultBox.querySelector('.card .name').textContent = '';
resultBox.querySelector('.card .number').textContent = '';
}
});
</script>
</body>
</html>