Найти образец
Здравствуйте, JS-уникумы! :victory:
Ищу адекватное решение своей наивной затее, поэтому, если кому не лень, то подскажите вариант в следующем простом примере: в качестве образца представлен блок div с временной серой заглушкой, в котором в последующем должно отображаться одно из случайных изображений данных td таблицы table. Далее при клике на изображении в таблице по образцу div'а на странице должен появиться alert "OKl!", а при неправильном выборе alert "Wrong". Пока так... P.S. В состоянии самостоятельно сделать подобное крайне корявыми устаревшими средствами, поэтому буду рад любым современным решениям! *Чем бы дитя не тешилось :write: , лишь бы не плакало*
<html>
<head>
<style>
div, td {
width: 100px;
height: 100px;
}
[data-id="red"] {
background-color: red;
}
[data-id="yellow"] {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
const tbl = document.querySelector('table');
const td = [...document.querySelectorAll('td')];
let win;
td.sort(() =>Math.round(Math.random())-0.5);
tbl.rows[0].innerHTML = '';
tbl.rows[0].append(...td.slice(0, 2));
//alert ("Wrong!")
if (win) alert("OK!");
})
</script>
</head>
<body>
<div><img src="https://via.placeholder.com/100x100.png"></div>
<br /><br /><br />
<table>
<tr>
<td data-id="red"></td>
<td data-id="yellow"></td>
</tr>
</table>
</body>
</html>
Всем хорошего настроения! |
click fo table
Борис К,
<!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);
}
</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();
});
</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>
</body>
</html>
|
Рони, просто здорово всё! :dance:
:thanks: :thanks: :thanks: P.S. Возможно, ещё что-нибудь надумаю спросить... так что, извините!)) |
Здравствуйте, Рони! :victory:
Экспериментируя :write: , дополнил ваш код ещё таблицей и стилем с изображениями букв, используя скрипт jQuery для рандомного выбора по кнопке таблицы только с цифрами или только с буквами, но сам понимаю, что это всё коряво налеплено и просто "смешно" :cray: Возможно ли подобное адекватно реализовать с помощью чистого JS? |
Все, что делается на jquery можно написать на чистом js
|
Voraa, да, мне как раз откликнулись ваши слова про устаревшее jQuery, поэтому проявил интерес к лаконичному pure JS :write:
|
Цитата:
<!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>
|
Восхитительно! :dance:
Какие возможности, какие способности! :write: Рони, огромная благодарность за полезные знания! :thanks: :thanks: :thanks: |
| Часовой пояс GMT +3, время: 07:28. |