Бинарные часы в Chrome с помощью Create Your Own

Задумал я как-то раз где-нибудь в своей системе приютить бинарные часы в целях расширения кругозора. Готовые варианты мне не подошли, захотелось что-то настраиваемое.
Вот то, что мне понадобилось: расширение для Chrome «Create Your Own» и готовый скрипт на js, найденный на Stackoverflow.

Можно получить такие часы:


или с другими картинками:



или вообще без картинок:

Что такое «Create Your Own»

Расширение «Create Your Own» позволяет любому человеку, освоившему html, css и js, создать простенькое приложение для Chrome. Например, вначале я использовал его, чтобы хранить там картинку раскладки Бирмана:


В настройках расширения всё достаточно прозрачно — 3 вкладки отвечают за редактирование html, css и javascript (который необходимо оставлять в тегах <script>, в отличии от первых двух). Редактируем код, добавляем стили и создаём сценарии на JS. Create Your Own поддерживает jQuery 1.4.2 и jQuery UI 1.8.2.



А теперь займёмся изготовлением часов с первой картинки. Читать их нужно так: слева направо (часы, минуты, секунды) и снизу вверх. Например, на первой картинке 15 часов 51 минута 39 секунд, на второй 16 часов 57 минут и 30 секунд.

Код бинарных часов

Итак, пояснять код не буду. Можно его переделывать так, как вам удобно. К примеру, прибить часы к нижней части или поменять картинки лампочек.

Картинки будем хранить в папке расширения (%USER%\AppData\Local\Google\Chrome\User Data\Default\Extensions\iceogelhbpnjkoofhefjhaaglhmomckg\0.1_0\images для Win7). Спасибо akira за совет.

HTML:

<div id="binaryClock"> 
<div id="bcHa"> 
<img src="/images/led0.png" alt="" id="bcHa1" /> 
<img src="/images/led0.png" alt="" id="bcHa2" /> 
</div> 
<div id="bcHb" class="edge"> 
<img src="/images/led0.png" alt="" id="bcHb1" /> 
<img src="/images/led0.png" alt="" id="bcHb2" /> 
<img src="/images/led0.png" alt="" id="bcHb4" /> 
<img src="/images/led0.png" alt="" id="bcHb8" /> 
</div> 
 
<div id="bcMa"> 
<img src="/images/led0.png" alt="" id="bcMa1" /> 
<img src="/images/led0.png" alt="" id="bcMa2" /> 
<img src="/images/led0.png" alt="" id="bcMa4" /> 
</div> 
<div id="bcMb" class="edge"> 
<img src="/images/led0.png" alt="" id="bcMb1" /> 
<img src="/images/led0.png" alt="" id="bcMb2" /> 
<img src="/images/led0.png" alt="" id="bcMb4" /> 
<img src="/images/led0.png" alt="" id="bcMb8" /> 
</div> 
 
<div id="bcSa"> 
<img src="/images/led0.png" alt="" id="bcSa1" /> 
<img src="/images/led0.png" alt="" id="bcSa2" /> 
<img src="/images/led0.png" alt="" id="bcSa4" /> 
</div> 
<div id="bcSb"> 
<img src="/images/led0.png" alt="" id="bcSb1" /> 
<img src="/images/led0.png" alt="" id="bcSb2" /> 
<img src="/images/led0.png" alt="" id="bcSb4" /> 
<img src="/images/led0.png" alt="" id="bcSb8" /> 
</div> 
</div> 
<div class="clear"></div> 
<script type="text/javascript">$(document).ready(function() { updateBinaryClock(); });</script> 

CSS:

body {
text-align: center;
}
 
#binaryClock{
padding: 10px;
width: 120px;
height: 70px;
margin: 0px auto;
}
#binaryClock div{
float: left;
}
#binaryClock div.edge {
margin-right: 10px;
}
#binaryClock img{
display: block;
}
.clear {
clear: both;
}

Javascript:

<script type="text/javascript">
/* Written by Scott Klarr @ www.scottklarr.com */
var ledPath = "/images";
 
function updateBcSet(group, time) {
var t2 = time%10;
var t1 = (time-t2)/10;
for(var x=8; x>0; x=x/2) {
if( (t1 - x) >= 0 ) {$("#bc"+group+"a"+x).attr("src",ledPath+"/led1.png"); t1-=x; }
if( (t2 - x) >= 0 ) {$("#bc"+group+"b"+x).attr("src",ledPath+"/led1.png"); t2-=x; }
}
}
 
function updateBinaryClock() {
var today=new Date();
$("#binaryClock img").attr("src",ledPath+"/led0.png");
updateBcSet("S",today.getSeconds());
updateBcSet("M",today.getMinutes());
updateBcSet("H",today.getHours());
setTimeout('updateBinaryClock()',1000);
}
</script>

Жмём «Save» и наслаждаемся часами. К своим я добавил ссылки из избранного:




Источник: Хабрахабр - Google Chrome
Оригинальная страница: Бинарные часы в Chrome с помощью Create Your Own