Дневной и ночной режим темы на JavaScript
 | |
| Вашему вниманию отличное решение на функцию для переключения дневного и ночного режима на JavaScript, который будет производиться по клику кнопки. Вы в этом мануале подробно узнаете про создание переключателя с дневного на ночной режим и обратно, и все это идет в исполнение HTML, CSS и JavaScript. Ведь теперь присутствуют в сети разнообразные типы веб-сайтов, которые задействуют темные и светлые темы, что идут под оформление или информацию. И здесь нужно добавить, ведь такой функционал, который присутствует на данном сайте, будет несомненно повышать качество веб-сайта, где аналогично повышает удовлетворенность пользователей или гостей сайта. Разные по стилистике или по тематике веб-сайты, в основе своей предоставляют различную информацию, где как раз можно задействовать такой формат подачи. Ведь при желании можно легко создавать такие конструкции с помощью HTML, CSS и JavaScript. Дневной и ночной переключатель для изменения цвета фона Установка: HTML Код <div class="karkas_osnov"> <div class="kaesevua"> <input type="checkbox" id="nasukaola"> </div> <p> Здесь идет ваше описание, которое по умолчанию иоли открытию сайта в светлом формате, где есть функция переключателя не темный оттенок. </p> </div> CSS Код body{ padding: 30px; } .karkas_osnov{ width: 486px; margin: 40px auto; } .kaesevua{ width: 100%; height: 40px; margin-bottom: 20px; position: relative; } #nasukaola{ -webkit-appearance: none; appearance: none; height: 40px; width: 75px; background-color: #15181f; position: absolute; right: 0; border-radius: 20px; outline: none; cursor: pointer; } #nasukaola:after{ content: ""; position: absolute; height: 30px; width: 30px; background-color: #ffffff; top: 5px; left: 7px; border-radius: 50%; } p{ font-family: "Open Sans",sans-serif; line-height: 35px; padding: 10px; text-align: justify; box-shadow: 0 0 20px rgba(0,139,253,0.25); } .sicinga_pesamila{ background-color: #15181f; color: #e5e5e5; } .sicinga_pesamila #nasukaola{ background-color: #ffffff; } .sicinga_pesamila #nasukaola:after{ background-color: transparent; box-shadow: 10px 10px #15181f; top: -4px; left: 30px; } JS Код document.getElementById("nasukaola").addEventListener("click", function(){ document.getElementsByTagName('body')[0].classList.toggle("sicinga_pesamila"); }); Здесь JavaScript задействован под две строки, а остальное идет HTML и CSS под оформление. Если у вас есть представление об основных HTML, CSS и JavaScript, вы можете легко создать проект, как дневной и ночной режим с участием JavaScript, следуя этому небольшому мануалу. Ниже представлена демонстрация, которая поможет вам узнать рабочий функционал, да и вообще создать такие переключатели, которые показывают время суток. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
