AntonBrock
@AntonBrock
screen light

Как сохранить фон на время, если даже закрыта вкладка?

Не очень локонично умею выражать мысли, но попробую объяснить.
Вы пользователь, открыли вкладку и там всего 2 видимых элемента: 1) фон 2) время (не участвует в вопросе)
Глянули и ушли. После 10 минут еще раз зашли, фон не сменился. Еще после 20 минут снова открыли вкладку и зашли, фон сменился.

Таймер фона, а именно кол. времени которое оно должно отображаться 15 минут.
Если вкладка закрыта, таймер не сбрасывается ( а продолжает считать).

Понимаю, что можно сделать через localStorage, понимаю принцип работы, но никак не могу сделать.
Люди, тыкните, дайте подзатыльник или просто скажите свое мнение. Как можно это реализовать ?

сonst img = [
    "https://s1.1zoom.ru/b5050/874/China_Houses_Rivers_Bridges_Sunrises_and_sunsets_541369_2560x1600.jpg",
    "http://intertour.vn/upload/infomation/12.sagano.jpg"
];

function timeBack() {
    const B = img.length;
    const i = Math.round(Math.random()*(B));
    changeTime(i);

    function changeTime(i) {
        i++;

        if (i > B - 1) {
            i = 0
        }; // alert (i)
        document.getElementById('main').style.backgroundImage = 'url('+img[i]+')';
        timerId01 = setTimeout(function() {
            changeTime(i)
        }, 10000);
        return;
    }

} 

timeBack();


<body>
    <div id="main">
        <div class="main__time">22</div>
    </div>
</body>
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Время, когда фон нужно будет поменять – через 15 минут после первого захода?
Тогда при первом заходе сохраняйте сразу в LS (время + 15 минут).

При открытии страницы смотрите, есть ли что в LS, и щелкайте часами до этого момента, или сразу меняйте фон на новый, если время уже прошло. И опционально удаляйте ключ из LS.

const now = new Date().getTime();
const LS = window.localStorage;
const key = "myBGTimerKey";
const saved = +LS.getItem(key);
if (saved) { // есть ключ
  if (now < saved) {
    // недостаточно времени прошло, ждём
  } else {
    // прошло достаточно. 
    // меняем фон
    // если прошло слишком много времени, стираем ключ 
    // и пляшем, будто это первый визит.
  }
} else {
  // это первый визит
  LS.setItem(key, now + 15 * 6e4); // через 15 минут заходите  
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 30 000 до 65 000 руб.
BSSL Москва
от 50 000 до 150 000 руб.
от 60 000 до 90 000 руб.
22 июл. 2019, в 17:03
500 руб./за проект
22 июл. 2019, в 16:55
500 руб./за проект