Форум

Борис К · #1 (**permalink**) 24.12.2021, 11:39

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

рони · #2 (**permalink**) 24.12.2021, 13:00

Борис К,
вместо if(win) alert("Hello world!");
будет

if(win) stopTimer();

Борис К · #3 (**permalink**) 24.12.2021, 13:31

Учитель Рони!
Смешно и грустно... так всё просто, а я уж слишком усложнил всё, мучаясь три дня!((( Куда только не вставлял этот злополучный stopTimer())))
Фуууххх... но стыдно!(((
Как всегда, моя огромная благодарность Вам и глубокое уважение за ценный опыт и профессионализм!

Борис К · #4 (**permalink**) 04.01.2022, 02:12

Рони, с Новым годом Вас!
Искренне желаю успехов во всех ваших начинаниях!))

Но, пожалуйста, помогите ещё по этой теме...
Хотелось бы таблицу вот в такой форме

<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!").
И тогда при таком решении, как сделать, чтобы при открытии странички каждый раз цветные квадратики в "стилях" располагались в табличке случайном порядке?
Фуууххх...

рони · #5 (**permalink**) 04.01.2022, 08:21

Борис К,
картинки располагать в таблице по порядку.

<!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>

Борис К · #6 (**permalink**) 04.01.2022, 15:10

Рони, благодарю за оперативный отклик, но, видимо, я недостаточно ясно изложил проблему тёмной ночкой((
Да, с расположением в табличке цветных изображений в случайном порядке всё отлично получилось!!! Огромный 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!").
Хочется, чтобы цветные квадратики были представлены через стили, а не как изображения!))
Фуууххх...

рони · #7 (**permalink**) 04.01.2022, 15:51

Сообщение от Борис К

красный, зелёный, синий, оранжевый

<!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>

Борис К · #8 (**permalink**) 04.01.2022, 21:06

Рони... ну, что сказать?!
Гениально!
Низко склоняю седую голову и крепко жму руку!
Огромная благодарность за помощь и глубокое уважение за профессионализм!
Всего самого доброго в наступившем Новом году... и в жизни!)))

рони · #9 (**permalink**) 04.01.2022, 21:31

Борис К,

... код можно сделать ещё интереснее, но лучше вы сами

Борис К · #10 (**permalink**) 05.01.2022, 02:16

Рони, Вы обо мне хорошего мнения... но, к сожалению, я очень далёк от программирования(((
Условно можно было бы назвать мою незатейливую возню с JS время от времени хобби на склоне лет...
Но я непременно прислушаюсь к вашему совету и интуитивно поэкспериментирую с кодом.

Спасибо Вам за всё хорошее!

Форум

Справочник

Discord чат

Курсы javascript