HexClock

Наверх!
HexClock
Демо Скачать
Доп. услуги

Описание

Недавно приобрёл игру Hacknet и там была программа которая выводила время как hex-код, в добавок ещё и менялся цвет.
И тут я сразу же решил реализовать такие же часы для сайта.
Думаю на сайтах хакерской тематики будет смотреться в тему.

Так же я написал две версии:
1. меняется цвет фона
2. меняется градиент фона, меняющий направление каждую секунду

Установка:
Первый вариант:
В нужное место добавьте этот код
Код
<div class="HexClock">#000000</div>  
  <script>  
  function HexClock() {  
  var HCdate = new Date();  
  var HCdateHH = HCdateAddNull(HCdate.getHours());  
  var HCdateMM = HCdateAddNull(HCdate.getMinutes());  
  var HCdateSS = HCdateAddNull(HCdate.getSeconds());  
  var HCtextDate = (HCdateHH+''+HCdateMM+''+HCdateSS);  
  $('.HexClock').text('#'+HCtextDate).css('background-color','#'+HCtextDate);  
  }  
  HexClock();  
  setInterval(function(){HexClock()},1000);  

  function HCdateAddNull(i) {  
  if(i<10) var i = '0'+i;  
  return i;  
  }  
  </script>


Далее стили
Код
.HexClock {display: block; width: 300px; height: 100px; line-height: 100px; color: #fff; font-size: 30px; text-align: center;}


Второй вариант:
Аналогично как и в первом
Код
<div class="HexClock">#000000</div>  
  <script>  
  function HexClock() {  
  var HCdate = new Date();  
  var HCdateHH = HCdateAddNull(HCdate.getHours());  
  var HCdateMM = HCdateAddNull(HCdate.getMinutes());  
  var HCdateSS = HCdateAddNull(HCdate.getSeconds());  
  var HCtextDate = (HCdateHH+''+HCdateMM+''+HCdateSS);  
  var HCtextDateInvert = (HCdateSS+''+HCdateMM+''+HCdateHH);  
  var HCdeg = (HCdateSS*6);  
  $('.HexClock').text('#'+HCtextDate).css('background','linear-gradient('+HCdeg+'deg, #'+HCtextDate+' 0%, #'+HCtextDateInvert+' 100%');  
  }  
  HexClock();  
  setInterval(function(){HexClock()},1000);  

  function HCdateAddNull(i) {  
  if(i<10) var i = '0'+i;  
  return i;  
  }  
  </script>


И стили
Код
.HexClock {display: block; width: 300px; height: 100px; line-height: 100px; color: #fff; font-size: 30px; text-align: center;}

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-55
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Теги: CbIPoK2513, HexClock
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.