Стильный таймер обратного отсчета на сайте
 | |
| Функция обратного отчета изначально выводить форму определенного времени, например 30 минут или 1 часа, где использовались HTML, CSS и JavaScript. В этой статье мы изучим таймер обратного отсчета на 120 мин или вами заданный отрезов времени в JS, где вы можете запустить обратный отсчет, остановить его, а также сбросить обратный отсчет до значения по умолчанию. Ведь здесь полная страницы, или никоторые говорят заглушка, где вы можете поставить для гостей и пользователей, чтоб те понимали, что через данное время сайт станет доступный. Сам код простой, здесь нет не каких библиотек, а прописан JavaScript, где вам нужно выставить цифры, это 1 час 60, и так далее, и только поде начнется обратный отчет. Таймер обратного отсчета — это тип компьютерной онлайн-программы, которая позволяет людям устанавливать определенные временные рамки. С помощью таймера данного типа, пользователи могут завершить все свои дела до истечения таймера, поскольку отсчет времени начинается, когда таймер инициируется пользователем. Да и новых пользователей не потеряете, ведь все будут наблюдать обратный отчет, где вы самостоятельно можете написать в чем проблема или вы что то на сайте обновляете или просто идет доработка одного из многих элементов. Не нужно только забывать, что здесь присутствует функционально только обратный отчет, и не более. При окончание или вам вручную придется открывать доступ на сайт, что скорей всего так и будет. Установка: HTML Код <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Документ</title> </head> <body> <div class="timer"></div> </body> </html> CSS Код body{ display: flex; align-items: center; justify-content: center; height: 100vh; background-image: url("Ссылка на обои страницы или на фон сайта"); background-repeat: no-repeat; background-size: cover; } .timer{ color: white; font-size:56px; font-weight: bolder; border:5px solid white; padding:50px; border-radius:50%; } JS Код var time=document.getElementsByClassName("timer") var timings=30; var i=0; var myInterval = setInterval(Timeout, 1000); function Timeout(){ if((timings*60-i)%60>=10){ time[0].innerHTML=parseInt(`${(timings*60-i)/60}`)+":"+`${(timings*60-i)%60}`; } else{ time[0].innerHTML=parseInt(`${(timings*60-i)/60}`)+":0"+`${(timings*60-i)%60}`; } i++; } Компании, которым необходимо соблюдать сроки, часто используют таймеры обратного отсчета, как это видно на тематических сайтах. Как пример можно взять интернет магазины, да там прям на сайте счетчик установлен, но можно красивой картинкой сделать фон, который показывает, что здесь произойдет распродажа, и как раз время отчета по теме выставлено по центру, что сделано оригинально. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |