Темные цифровые часы для сайта на CSS
 | |
| Вашему вниманию темные цифровые часы, которые вы можете реализовать по установки на своем сайте, где работают на плагине Vue.js. Что будет выводить знаки как текущая дата и безусловно время в онлайн режиме. При установке вам нужно будет прописать код и стили и подключить библиотеку Vue.js. Это может выбранное вами место или сделать на отдельной странице, где на весь монитор будет. Но также хочется подметить, что вы сами можете еще надпись сделать под табло. Если говорить о CSS, то здесь от вас будет зависеть внешний вид, что можно настроить под любой дизайн сайта по оттенку цвета. Если вас не устраивает размер шрифта, то он также меняется в стилях, что прикреплены к стилистике материала. Переходим к установке: HTML код ставим там где считаете нужным. Код <div id="clock"> <p class="date">{{ date }}</p> <p class="time">{{ time }}</p> <p class="text">ZORNET.RU - Сайт для uCoz</p> </div> Теперь нужно подключить библиотеку Vue.j Код <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script> Здесь же ниже ставим скрипт, который отвечает за функциональность. Код <script> var clock = new Vue({ el: '#clock', data: { time: '', date: '' } }); var week = ['ВС', 'ПОН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СУБ']; var timerID = setInterval(updateTime, 1000); updateTime(); function updateTime() { var cd = new Date(); clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2); clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]; }; function zeroPadding(num, digit) { var zero = ''; for (var i = 0; i < digit; i++) { zero += '0'; } return (zero + num).slice(-digit); } </script> В CSS ставим стили и как раз на них вы можете выставлять ту гамму цвета, что вам нужно и не забываем про шрифт, это больше и меньше делать. Код #clock { font-family: sans-serif; color: #ffffff; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #daf6ff; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); } #clock .time { letter-spacing: 0.05em; font-size: 80px; padding: 5px 0; } #clock .date { letter-spacing: 0.1em; font-size: 24px; } #clock .text { letter-spacing: 0.1em; font-size: 12px; padding: 20px 0 0; } На этом установка закончена, что только добавлю, они отлично смотрятся как на светлом или темном фоне. Источник: art-ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
