Здравствуйте!)
В нижеприведённом примере кнопкой 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>