|
Сообщение от Борис К
|
|
рандомного выбора по кнопке таблицы только с цифрами или только с буквами
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
td,
div.show {
width: 100px;
height: 100px;
}
div.show {
transition: 1s;
background-size: 200px;
background-position: -50px;
}
[data-id="1"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
}
[data-id="2"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
}
[data-id="3"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
}
[data-id="4"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
}
[data-id="5"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
}
[data-id="6"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
}
.letter [data-id="1"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=a);
}
.letter [data-id="2"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=b);
}
.letter [data-id="3"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=c);
}
.letter [data-id="4"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=d);
}
.letter [data-id="5"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=e);
}
.letter [data-id="6"] {
background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=f);
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
const tab = document.querySelector('table');
const cells = document.querySelectorAll('td');
const len = cells.length;
const img = document.querySelector('.show');
let id = 0,
i;
function showImg() {
do {
i = Math.trunc(Math.random() * len);
i = cells[i].dataset.id;
} while (i == id);
id = i;
img.dataset.id = id;
}
tab.addEventListener('click', ({
target
}) => {
if (target = target.closest('[data-id]')) {
const curid = +target.dataset.id;
let win = curid == id;
let txt = win ? 'OK!' : 'Wrong!';
alert(txt);
if (win) showImg();
}
})
showImg();
function toggleLetter()
{
document.body.classList.toggle('letter', Math.random() > .5)
}
toggleLetter();
btn.addEventListener('click', toggleLetter)
});
</script>
</head>
<body>
<div class="show"></div>
<table>
<tr>
<td data-id="1"></td>
<td data-id="2"></td>
<td data-id="3"></td>
</tr>
<tr>
<td data-id="4"></td>
<td data-id="5"></td>
<td data-id="6"></td>
</tr>
</table>
<button id="btn">random letter/number</button>
</body>
</html>