Описание
Недавно приобрёл игру 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;}
