Цветной обратный отсчет с помощью CSS/JS
 | |
| Красивый и простой таймер обратного отсчета на Javascript, что по своему дизайн выглядит оригинально, где отсчитывает обратный счет времени. Также можно сразу заметить, что дни по цифрам отличаются размером от минут или секунд. Ведь каждое значение имеет свой оттенок палитры цвета, а также выставлены под оригинальный размер. Где начинаем от секунд, что ярко смотрятся, но в более мелком шрифте, и так он более становится. Это цветной обратный отсчет, который по умолчанию находится на темном фоне, здесь все очень просто. Так как все значение будут ярко выражены под своей гаммой цвета. Где вы самостоятельно можете переделать, как по цветовой палитре, но и выставить значение шрифта, что более соответствует вашему сайту или блогу. Просто оригинальный анимированный таймер обратного отсчета при задействовании CSS и Javascript и jQuery. Установка: HEAD Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> HTML Код <div id="timer"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div> CSS Код @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace); #days { font-size: 200px; color: #db4844; } #hours { font-size: 150px; color: #f07c22; } #minutes { font-size: 100px; color: #f6da74; } #seconds { font-size: 50px; color: #abcd58; } div { display: inline-block; line-height: 1; padding: 20px; font-size: 40px; } span { display: block; font-size: 20px; color: white; } body { text-align: center; font-family: 'Covered By Your Grace', cursive; color: white; background: #222; } JS Код function makeTimer() { var endTime = new Date("August 26, 2013 18:00:00 PDT"); var endTime = (Date.parse(endTime)) / 1000; var now = new Date(); var now = (Date.parse(now) / 1000); var timeLeft = endTime - now; var days = Math.floor(timeLeft / 86400); var hours = Math.floor((timeLeft - (days * 86400)) / 3600); var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60); var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60))); if (hours < "10") { hours = "0" + hours; } if (minutes < "10") { minutes = "0" + minutes; } if (seconds < "10") { seconds = "0" + seconds; } $("#days").html(days + "<span>Days</span>"); $("#hours").html(hours + "<span>Hours</span>"); $("#minutes").html(minutes + "<span>Minutes</span>"); $("#seconds").html(seconds + "<span>Seconds</span>"); } setInterval(function() { makeTimer(); }, 1000); Установка завершена, также нужно заметить, если у кого уже установлена библиотека, то вам не следует новую вписывать, но разве только вы устанавливаете обратный отчет, виде заглушки, на заданное время, то в отдельной странице вероятно нужно прописать. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |