Пример:
Пример, который можно увидеть на этой странице, имеет 2 таймера.
Первый считает время до вывода предупредительного окошка с информацией о том, что при бездействии что-то произойдет, а по истечению второго это что-то запустится.
При клике или скроле страницы оба таймера обнуляются.
Если нам никого предупреждать не нужно, то второй таймер просто удаляем.
HTML:
|
1 2 3 4 5 |
<div class="atimer"> <div class="atimer-text"></div> <div class="atimer-time"></div> </div> <div class="atimer-pinguin"></div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.atimer { display: none; background: rgba(255,255,255,0.9); padding: 16px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 99998; text-align: center; box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%); box-sizing: border-box; } .atimer-text p { font-size: 16px; margin: 0 0 6px; } .atimer-time { margin-top: 10px; height: 8px; width: 0; background: #337AB7; transition: width 4.9s linear; } .atimer-time.timerun { width: 100%; } .atimer-pinguin { max-width: 100%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; background: #F6FCFF; padding: 26px; border-radius: 50%; box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%); border: 8px solid #BFE2FF; overflow: hidden; display: none; } |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
let aTimer1, aTimer2, aUser = false, aWait1 = 5000, // 5 секунд до показа предупредительного окна aWait2 = 5000; // 5 секунд до основного действия $(window).on('load click scroll', function(){ clearTimeout(aTimer1); clearTimeout(aTimer2); if(aUser == true){ // Действия при возвращении пользователя $('.atimer').fadeOut(); $('.atimer-time').removeClass('timerun'); $('.atimer-pinguin').fadeOut(); } aUser = false; aTimer1 = setTimeout(function(){ // Действия при отсутствии пользователя $('.atimer .atimer-text').html('<p>Страница находится в состоянии покоя длительное время и скоро будет показана заставка</p><p>Для продолжения работы кликните мышкой</p>'); $('.atimer').fadeIn(); $('.atimer-time').addClass('timerun'); aUser = true; aTimer2 = setTimeout(function(){ $('.atimer-pinguin').html('<img src="https://atuin.ru/upload/1492334767_ping.gif">'); $('.atimer-pinguin').fadeIn(); $('.atimer').fadeOut(); }, aWait2); }, aWait1); }); |
Добавить комментарий: