» »

Темные цифровые часы для сайта на CSS

Темные цифровые часы для сайта на 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
23.08.2017 Просмотров: 415 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Critic©
Critic© 23.08.2017 23:031
0
Раньше что не на сайт по скриптам зайдешь то время где то установлено, больше всего вверх сайта можно было увидеть.
Kosten
Kosten 23.08.2017 23:232
0
Было дело, что сам ставил в шапку, но это так для разнообразие. просто на некоторых нужны часы, на некоторых красиво в дизайн они подходят и этим его дополняют, по разному у всех строиться, что часы больше как дополнение идут.
VIP9514
VIP9514 01.09.2017 18:273
0
А где источник ?
Kosten
Kosten 01.09.2017 23:454
0
Установил, просто не думал, что сайт art создал с нуля эти часы.
aloky
aloky 02.09.2017 20:195
0
Что тут art-ucoz создал? css? Мда уж.
Kosten
Kosten 02.09.2017 20:406
0
Так про это тоже, надеюсь VIP9514 напишет?
VIP9514
VIP9514 02.09.2017 20:437
0
Причем тут CSS и кто создал, я говорю о том, от куда был взят материал.
aloky
aloky 02.09.2017 20:568
0
Можно одну букву или название стиля поменять, то это уже не будет материал из art-ucoz. Тут не надо быть гением написать часы на vue.js
VIP9514
VIP9514 02.09.2017 21:019
-1
Ска, ты такой умный ? Возьми и напиши. Хэйтить все могут, а вот написать что-то самостоятельно, так руки из жопы торчат. Тему закрыл и больше не обсуждаю тупые вопросы. Я просто попросил указать источник, а раздули из мухи слона.
Kosten
Kosten 02.09.2017 21:1610
0
VIP9514, можно немного на тормоза пыл сбавить, что обсуждать пользователь решает.
avatar