Временные условия в javascript
может ли кто-нибудь помочь мне с условиями, основанными на времени?
CSS:
Day {
position: absolute; width: 360px; height: 360px; background-image: url("../image/BackgroundDay.png"); background-repeat: no-repeat; }Night {
position: relative; width: 360px; height: 360px; background-image: url("../image/BackgroundNight.png"); background-repeat: no-repeat; }
HTML
<img id = "Day" alt = "" style = "opacity: 0;"/>
<img id = "Night" alt = "" style = "opacity: 0;"/>
js
var dayToNight1 = '19:05:00';
var dayToNight2 = '19:05:05';
var dayToNight3 = '19:05:10';
var dayToNight4 = '19:05:15';
var dayToNight5 = '19:05:20';
var dayToNight6 = '19:05:25';
var dayToNight7 = '19:05:30';
var dayToNight8 = '19:05:35';
var dayToNight9 = '19:05:40';
var dayToNight10 = '19:05"45';
if (time > dayToNight1)
{
document.getElementById("Day").style.opacity = "0.9";
document.getElementById("Night").style.opacity = "0.1";
} // i got these conditions 10, I just didnt add them so it is not that long.
var nightToDay1 = '08:00:00';
var nightToDay2 = '08:00:05';
var nightToDay3 = '08:00:10';
var nightToDay4 = '08:00:15';
var nightToDay5 = '08:00:20';
var nightToDay6 = '08:00:25';
var nightToDay7 = '08:00:30';
var nightToDay8 = '08:00:35';
var nightToDay9 = '08:00:40';
var nightToDay10 = '08:00:45';
if (time > nightToDay1 && time <= '19:05:00')
{
document.getElementById("Day").style.opacity = "0.1";
document.getElementById("Night").style.opacity = "0.9";
}// same here 10 conditions
Моя проблема в том. У меня есть два изображения, наложенные друг на друга.
Я хотел бы перейти с дня на ночь, если придет определенное время. Поэтому, если время достигает 19:00:00, я хочу медленно менять фон с дня на ночь, просто используя непрозрачность.
Тогда я перейду из Ночи в День в 08:00:00. Но вот проблема, я не знаю, как сделать это условие и сказать, если (время > 19:00:00) начать изменять непрозрачность для обоих изображений и перейти от дня к ночи Если время достигает 19:00:00, оно просто мгновенно переходит в ночь без моего перехода непрозрачности.
Не могли бы вы дать мне быстрое представление о том, как сделать определенное условие вовремя, используя javascript, пожалуйста? Спасибо за любую идею. Или если у вас есть другая идея, как сделать что-то подобное более эффективно, я был бы признателен, если бы
@04FS Не могли бы вы привести пример, пожалуйста? Я получал обновления сверхурочно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что это может немного приблизить вас к тому, что вам нужно. Вместо того, чтобы указывать время вручную, проще узнать, как далеко вы находитесь между началом и концом перехода, а затем использовать это для установки непрозрачности.
Время представлено здесь в виде массивов [hours, minutes], и затем мы находим общее количество минут в каждом времени.
Я предполагаю, что это еще не совсем идеально, но, надеюсь, это должно проиллюстрировать, что возможно:
const getTotalMinutes = ([hours, minutes]) =>
(hours * 60) + minutes;
const transitionStart = getTotalMinutes([9, 13]);
const transitionEnd = getTotalMinutes([9, 15]);
const getCurrentTransitionState = () => {
const now = new Date();
const totalMinutes = getTotalMinutes([
now.getHours(),
now.getMinutes(),
]);
const transitionTotal = transitionEnd - transitionStart;
const timeIntoTransition = totalMinutes - transitionStart;
if (timeIntoTransition >= transitionTotal) {
return 1;
}
return timeIntoTransition > 0 ?
timeIntoTransition / transitionTotal :
0;
}
setInterval(() => {
const current = getCurrentTransitionState();
document.getElementById('day').style.opacity = 1-current;
}, 1000);img {
position: fixed;
top: 0;
left: 0;
transition: all 10s ease;
width: 100vw;
}<img id = "night" src = "http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg" />
<img id = "day" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-OLKhRVHgSrPFxIY8n7ZmrgpZQFvgxeT7p3DWifbHBKoF1D57zg" />Можно ли сделать например if (time=19:00:00){начать переход? }
Это возможно и проще, но в вашем вопросе у вас было несколько раз, которые вы проверяли?
забудьте о временах в моем вопросе. Не могли бы вы помочь мне с этим переходом? Например, начать переход в 19:00:00, вернуть переход обратно в 08:00:00.
Нет; StackOverflow не является службой написания кода, если у вас есть другой вопрос, вы должны задать другой вопрос.
Мне не нужен весь код, мне просто нужно одно условие. нвм спасибо за помощь
Прежде всего, избавьтесь от любого из этих пятисекундных интервалов и вместо этого используйте переход для изменения непрозрачности в течение определенного периода времени. Во-вторых, вам нужно найти правильный способ активировать это — если я уже нахожусь на вашем сайте с 18:47, вы, вероятно, все еще хотите активировать это в 19:05, верно? Затем вам нужно запустить скрипт с интервалом в фоновом режиме, который периодически проверяет время и реагирует при необходимости (например, добавляя/удаляя класс в соответствующих элементах, чтобы вызвать переход).