|
Автоматическая остановка таймера после завершения интеракции
Здравствуйте!)
В нижеприведённом примере кнопкой Start запускается таймер, далее необходимо кликами на "H" и "w" поменять их местами, после чего сработает alert("Hello world!"), потом вручную кнопкой Stop останавливается таймер. Вопрос: какой код необходимо прописать вместо alert("Hello world!"), чтобы таймер останавливался автоматически без задействования кнопки Stop? <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
let temp = [];
let end = ["H", "e", "l", "l", "o", "w", "o", "r", "l", "d"];
let win;
function exch(event) {
if(win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
temp[0].classList.remove("active");
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({src}) => src.split('=')[2]);
win = numbers.every((a, i) => a === end[i]);
if(win) alert("Hello world!");
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="1" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=w"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=e"></td>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="5" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=o"></td>
</tr>
<tr>
<td><img class="click" name="6" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=H"></td>
<td><img class="click" name="7" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=o"></td>
<td><img class="click" name="8" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="9" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="10" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=d"></td>
</tr>
</table>
</form>
<br /><br /><br />
<div style="text-align: center">
<label id="seconds">00</label>
<br />
<input type="button" id="gobutton" onclick="startTimer()" value="Start">
<input type="button" id="stopbutton" onclick="stopTimer()" value="Stop">
<br />
<label id="totalTime">
</label>
</div>
<script type="text/javascript">
let secondsLabel = document.getElementById("seconds");
let totalSeconds = 0;
let counter;
let timerOn;
let htmlResets;
let totalMills = 0;
function startTimer() {
if (timerOn == 1) {
return;
}
else {
counter = setInterval(setTime, 10);
timerOn = 1;
htmlResets = 0;
}
}
function pauseTimer() {
if (timerOn == 1) {
clearInterval(counter);
timerOn = 0;
}
if (htmlResets == 1) {
secondsLabel.innerHTML = "00";
totalMills = 0;
totalSeconds = 0;
}
else {
htmlResets = 1;
}
}
function stopTimer() {
totalTime.innerHTML = secondsLabel.innerHTML;
secondsLabel.innerHTML = "00";
totalMills = 0;
totalSeconds = 0;
clearInterval(counter);
timerOn = 0;
}
function setTime() {
++totalMills;
if (totalSeconds == 60) {
totalSeconds = 0;
secondsLabel.innerHTML = "00";
clearInterval(counter);
}
if (totalMills == 100) {
totalSeconds++;
secondsLabel.innerHTML = pad(totalSeconds % 60);
totalMills = 0;
}
if (totalSeconds == 60) {
totalSeconds = 0;
}
}
function pad(val) {
let valString = val + "";
if (valString.length < 2) {
return "0" + valString;
}
else {
return valString;
}
}
</script>
</body>
</html>
|
Борис К,
вместо if(win) alert("Hello world!"); будет if(win) stopTimer(); :-? |
Учитель Рони!
Смешно и грустно... так всё просто, а я уж слишком усложнил всё, мучаясь три дня!((( Куда только не вставлял этот злополучный stopTimer()))) Фуууххх... но стыдно!((( Как всегда, моя огромная благодарность Вам и глубокое уважение за ценный опыт и профессионализм! |
Рони, с Новым годом Вас!
Искренне желаю успехов во всех ваших начинаниях!)) Но, пожалуйста, помогите ещё по этой теме... Хотелось бы таблицу вот в такой форме <table align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="blue"></td>
<td id="green"></td>
</tr>
<tr>
<td id="red"></td>
<td id="orange"></td>
</tr>
</table>
иметь в коде, представленном ниже (чтобы вместо изображений с буквами были "стили"): <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#red {
background-color: #ff0000;
width: 100px;
height: 100px;
}
#orange {
background-color: #ff9900;
width: 100px;
height: 100px;
}
#green {
background-color: #006600;
width: 100px;
height: 100px;
}
#blue {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
let temp = [];
let end = ["r", "g", "b", "o"];
let win;
function exch(event) {
if(win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
}
} else {
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({src}) =>
src.split('=')[2]);
win = numbers.every((a, i) => a === end[i]);
if(win) alert("Hello world!");
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=b"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/006600/ffffff?font=playfair-display&text=g"></td>
</tr>
<tr>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff9900/ffffff?font=playfair-display&text=o"></td>
</tr>
</table>
</form>
</body>
</html>
Например: при кликах на синий и красный квадратики в "стилях" они меняются местами (в результате в таблице должна быть такая последовательность цветов слева направо, сверху вниз - красный, зелёный, синий, оранжевый), после чего срабатывает alert("Hello world!"). И тогда при таком решении, как сделать, чтобы при открытии странички каждый раз цветные квадратики в "стилях" располагались в табличке случайном порядке? Фуууххх... |
Борис К,
картинки располагать в таблице по порядку. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#red {
background-color: #ff0000;
width: 100px;
height: 100px;
}
#orange {
background-color: #ff9900;
width: 100px;
height: 100px;
}
#green {
background-color: #006600;
width: 100px;
height: 100px;
}
#blue {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
let temp = [];
let end = ["r", "g", "b", "o"];
let win;
function exch(event) {
if (win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
}
} else {
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({
src
}) =>
src.split('=')[2]);
if (!event.random) win = numbers.every((a, i) => a === end[i]);
if (win) alert("Hello world!");
}
}
document.addEventListener("DOMContentLoaded", function() {
let img = Array.from(document.querySelectorAll(".click"));
img.sort(_ => Math.random() - .5);
img.forEach(target => exch({
target,
random: true
}));
temp = [];
});
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/006600/ffffff?font=playfair-display&text=g"></td>
</tr>
<tr>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=b"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff9900/ffffff?font=playfair-display&text=o"></td>
</tr>
</table>
</form>
</body>
</html>
|
Рони, благодарю за оперативный отклик, но, видимо, я недостаточно ясно изложил проблему тёмной ночкой((
Да, с расположением в табличке цветных изображений в случайном порядке всё отлично получилось!!! Огромный Thanx))) Но хотелось бы, чтобы таблица была такого вида (с использованием стилей): <table align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="blue"></td>
<td id="green"></td>
</tr>
<tr>
<td id="red"></td>
<td id="orange"></td>
</tr>
</table>
А не так как есть - с использованием изображений (<td><img class="click" name="1" src="url"></td>) Без понятия, как в этой строке - let end = ["r", "g", "b", "o"]; означать ячейки таблицы с использованием стилей (как это - <td id="blue"></td>), а не изображений (<img src="...>), чтобы при завершении последовательности, например, красный, зелёный, синий, оранжевый срабатывал alert("Hello world!"). Хочется, чтобы цветные квадратики были представлены через стили, а не как изображения!)) Фуууххх... |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
background-color: #ff0000;
width: 100px;
height: 100px;
}
[data-id="orange"] {
background-color: #ff9900;
width: 100px;
height: 100px;
}
[data-id="green"] {
background-color: #006600;
width: 100px;
height: 100px;
}
[data-id="blue"] {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll("[data-id]"));
let idEnd = tds.map(({
dataset: {
id
}
}) => id);
let win;
function exch(event) {
if (win) return;
let td = event.target.closest("[data-id]");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id]
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
if (!event.random) win = tds.every(({
dataset: {
id
}
}, i) => id === idEnd[i]);
if (win) alert("Hello world!");
}
}
form.addEventListener("click", exch);
tds.slice(0).sort(_ => Math.random() - .5)
.forEach(target => exch({
target,
random: true
}));
temp = [];
});
</script>
</head>
<body>
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="green"></td>
</tr>
<tr>
<td data-id="blue"></td>
<td data-id="orange"></td>
</tr>
</table>
</form>
</body>
</html>
|
Рони... ну, что сказать?!
Гениально! Низко склоняю седую голову и крепко жму руку! Огромная благодарность за помощь и глубокое уважение за профессионализм! Всего самого доброго в наступившем Новом году... и в жизни!))) |
Борис К,
:thanks: ... код можно сделать ещё интереснее, но лучше вы сами :lol: |
Рони, Вы обо мне хорошего мнения... но, к сожалению, я очень далёк от программирования(((
Условно можно было бы назвать мою незатейливую возню с JS время от времени хобби на склоне лет... Но я непременно прислушаюсь к вашему совету и интуитивно поэкспериментирую с кодом. :-? Спасибо Вам за всё хорошее! |
| Часовой пояс GMT +3, время: 11:34. |
|