Выполнение определенной функции по времени JS
:help: :help: :help: :help: :help: :help: :help: :help: :help: :help:
Доброй ночи, у меня возникла такая проблемка. Собираюсь сделать функцию через JavaScript чтобы меняло цветовую тему по времени, т.е. по часам Пробовал разными способами сделать, что-то не получилось, хочу спросить у высших по уровню по JS, как это сделать. Знаю что тут требуется использовать условие. Но вот чтобы функция заработала... что-то не получается Вот вам основной JS код
let toggle = document.getElementById('toggleDark')
let image = document.querySelector('.image')
let footer1 = document.querySelector('.footer')
let but= document.querySelector('.action-but')
let body = document.querySelector('.body')
toggle.addEventListener('click', toggleScheme, true)
function toggleScheme () {
if (toggle.getAttribute("aria-checked") == "true") {
toggle.setAttribute("aria-checked", "false");
} else {
toggle.setAttribute("aria-checked", "true");
}//начинаются цветовые темы
image.classList.toggle('image-dark')
image.classList.toggle('image-light')
footer1.classList.toggle('footer-dark')
footer1.classList.toggle('footer-light')
but.classList.toggle('action-but-dark')
but.classList.toggle('action-but-light')
body.classList.toggle('body-n')
body.classList.toggle('body-l')
}
var date = new Date(); var hours = date.getHours(); В целом, мне нужно использовать эти класс листы, например, если время меньше либо равно 12(часам) то выполняется image.classList.*('image-light'), перепробовал разные методы, но что-то не получается |
WildYT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.footer {
height: 100px;
background-color: hsla(60, 100%, 50%, 1);
}
.light .footer {
background-color: hsla(36, 100%, 90%, 1);
}
.dark .footer {
background-color: hsla(210, 100%, 56%, 1);
}
</style>
<script>
var current = "";
function toggleScheme()
{
var date = new Date();
var hours = date.getHours();
if(hours <= 12 && current != "light") {
current && document.body.classList.remove(current)
document.body.classList.add(current = "light");
}
else if(hours > 12 && current != "dark"){
current && document.body.classList.remove(current)
document.body.classList.add(current = "dark");
}
window.setTimeout(toggleScheme, 1000);
}
document.addEventListener( "DOMContentLoaded", toggleScheme)
</script>
</head>
<body>
<div class="footer"></div>
</body>
</html>
|
хм, интересный подход, проверю, а так благодарю.
|
нет, не пашит
|
Цитата:
|
| Часовой пояс GMT +3, время: 06:42. |