Форум

irchik · #1 (**permalink**) 09.11.2018, 00:41

Здравствуйте! Есть кнопка, которая отвечает за замену фона на сайте, она работает на:

<img src="knopka.png" onClick="return setBg1()">

<script>

</script>

и есть мобильная версия сайта для разрешения <1200, где два других фона, которые тоже нужно переключать кнопкой.
я не придумала ничего умнее, чем скрыть первую кнопку с помощью display:none; и проявить вторую кнопку, при нажатии на которую срабатывает скрипт-клон, но с другими фонами:

<img src="knopka.png" onClick="return setBg2()">

<script>

</script>

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

Я пыталась подключить $(window).resize(function(), чтобы скрипт отключался при определенном разрешении - не сработало,
чтобы принудительно включался мобильный фон при уменьшении окна - сработало, но тут либо один, либо второй, то есть если полный фон светлый - то мобильный тоже светлый, а если полный фон темный - то мобильный тоже должен быть темным, но получалось переключить оба либо на светлый, либо на темный.

Зачем мне это надо? я не знаю, но не могу спокойно жить, пока задача не решена. Возможно, все вообще очень кривое, потому что очень отдаленно понимаю js, ищу примеры и разбираю их, сама мало что могу написать...

Помогите!

Malleys · #2 (**permalink**) 09.11.2018, 01:38

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
			body {
				background: black no-repeat center;
				height: 100vh;
				margin: 0;
			}

			@media (max-width: 1200px) {
				body.day {
					background-image: url(https://placeimg.com/640/480/nature/grayscale);
				}
				body.night {
					background-image: url(https://placeimg.com/640/480/nature);
				}
			}

			@media not all and (max-width: 1200px) {
				body.day {
					background-image: url(https://placeimg.com/1280/960/nature/grayscale);
				}
				body.night {
					background-image: url(https://placeimg.com/1280/960/nature);
				}
			}

			button {
				border-radius: .5em;
				margin: 1em;
				padding: 1em;
				--color: #f06;
				font: bold 1.5em sans-serif;
				border: .25em solid var(--color);
				color: var(--color);
				background: white;
				transition: 300ms;
			}

			button:hover, button:focus {
				color: white;
				box-shadow: inset 0 0 0 2em var(--color); 
			}

		</style>
		<script>

			var count = 0;
			
			function setBg() {
				document.body.classList.toggle("day", count % 2 === 0);
				document.body.classList.toggle("night", count % 2 === 1);
				count++;
			}

			document.addEventListener("DOMContentLoaded", setBg);

		</script>
	</head>
	<body>
		<button onclick="setBg();">Переключить</button>
	</body>
</html>

irchik · #3 (**permalink**) 09.11.2018, 11:12

Я в пищащем восторге!

Я мучилась три дня, изучая всё подряд, а это так просто и изящно!! Спасибо огроменное!

рони · #4 (**permalink**) 09.11.2018, 13:39

небольшое дополнение
убрал day, стало одна строка classList.toggle
добавил outline: none; нет синей рамки при клике на кнопке

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
            body {
                background: black no-repeat center;
                height: 100vh;
                margin: 0;
            }

            @media (max-width: 1200px) {
                body {
                    background-image: url(https://placeimg.com/640/480/nature/grayscale);
                }
                body.night {
                    background-image: url(https://placeimg.com/640/480/nature);
                }
            }

            @media not all and (max-width: 1200px) {
                body {
                    background-image: url(https://placeimg.com/1280/960/nature/grayscale);
                }
                body.night {
                    background-image: url(https://placeimg.com/1280/960/nature);
                }
            }

            button {
                border-radius: .5em;
                margin: 1em;
                padding: 1em;
                --color: #f06;
                font: bold 1.5em sans-serif;
                border: .25em solid var(--color);
                color: var(--color);
                background: white;
                transition: 300ms;
            }

            button:hover, button:focus {
                color: white;
                box-shadow: inset 0 0 0 2em var(--color);
            }
            button:focus {
                outline: none;
            }

        </style>
        <script>

            var count = 0;

            function setBg() {
                document.body.classList.toggle("night", count % 2 === 1);
                count++;
            }

            document.addEventListener("DOMContentLoaded", setBg);

        </script>
    </head>
    <body>
        <button onclick="setBg();">Переключить</button>
    </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript