Приветствую вас дорогие друзья! В этом небольшом уроке будет приведен вариант создания семисегментного индикатора.
Что такое семисегментный индикатор? Семисегментный индикатор – это устройство, которое позволяем отображать цифровую информацию (и не только цифровую). Подробнее можно узнать на Википедии.
Их можно встретить повсюду – часы, температура, показания курсов валют и прочие цифровые устройства.
Как и во всех остальных статьях из рубрики – JavaScript с примерами, в конце статьи имеется DEMO пример, а также исходные файлы, которые вы можете скачать в любое время дня и суток!
Вот пример использования этого индикатора в настольных часах:
Название этого индикатора говорит само за себя – 7 сегментов (7 индикаторов), также, имеется восьмой сегмент(точка), который используется, например, для отделения целой части от дробной.
Каждый индикатор имеет свое название – букву английского алфавита, и имеет следующий порядок:
Давайте попробуем сымитировать этот индикатор с помощью css и javascript.
Сделать это можно разными способами – первое, что приходит на ум – это использование семи блоков div, но можно сделать и по-другому, использовав css свойство – “border”.
Сегмент будет состоять из двух блоков – “DIV”, у которых мы и будем изменять стили – рамку.
Выведем 2 абсолютно одинаковых индикатора:
HTML код:
<div class="indikator">
<div class="one_block"></div>
<div class="two_block"></div>
</div>
<div class="indikator">
<div class="one_block"></div>
<div class="two_block"></div>
</div>
CSS стили:
.indikator{
width: 120px;
height: 260px;
margin: 30px auto;
padding: 20px;
font-size: 20px;
color: #666;
float: left;
}
.one_block,.two_block{
width: 120px;
height: 120px;
position: absolute;
margin: 0 0 0 0px;
border-radius: 5px;
}
.two_block{
margin: 126px 0 0 0px;
}
Скачала создаем строки выборки для каждой из букв, а замет формируем массив цифр из этих строк, для удобного обращения к нужному сегменту по букве и для вывода нужной цифры по индексу.
Для того, чтобы исполнить код записанный в виде строки, будем использовать функцию – “eval”.
Для большей наглядности запустим интервальный цикл, который будет выводить все цифры с периодом, записанным в переменной – “speed” в миллисекундах.
Цвет индикации хранится в переменной – “Color”:
Jquery код:
$(document).ready(function(){
var color = 'red'; //цвет индикации
var speed = 1000; //скорость в миллисекундах
var a = "$('.one_block').css('border-top','5px solid " + color + "')";
var b = "$('.one_block').css('border-right','5px solid " + color + "')";
var c = "$('.two_block').css('border-right','5px solid " + color + "')";
var d = "$('.two_block').css('border-bottom','5px solid " + color + "')";
var e = "$('.two_block').css('border-left','5px solid " + color + "')";
var f = "$('.one_block').css('border-left','5px solid " + color + "')";
var g = "$('.one_block').css('border-bottom','5px solid " + color + "')";
var clear = "$('.one_block,.two_block').css('border','0')";
var number = new Array(
a + ';' + b + ';' + c + ';' + d + ';' + e + ';' + f, //0
b + ';' + c, //1
a + ';' + b + ';' + g + ';' + e + ';' + d, //2
a + ';' + b + ';' + g + ';' + c + ';' + d, //3
f + ';' + g + ';' + b + ';' + c, //4
a + ';' + g + ';' + d + ';' + c + ';' + f, //5
a + ';' + g + ';' + d + ';' + c + ';' + f + ';' + e, //6
b + ';' + c + ';' + a, //7
a + ';' + b + ';' + c + ';' + d + ';' + e + ';' + f + ';' + g, //8
a + ';' + b + ';' + c + ';' + d + ';' + f + ';' + g //9
)
var start = 0;
function ind() {
eval(clear);
if( start == 4 || start == 9 ) $('.two_block').css('margin','125px 0 0 5px');
else $('.two_block').css('margin','126px 0 0 0');
eval(number[start]);
if( start < 10) start++; else start = 0;
color = 'green';
}
setInterval(ind, speed)
});
То есть чтобы, например, зажечь сегмент с буквой “G”, нужно написать так:
eval(g)
А чтобы вывести, например, цифру 5, пишем так:
eval(number[5]);
С помощью выборки – “Clear” мы стираем выведенную цифры (просто убираем рамку).
Данный пример можно доработать под свои нужды, например, написав функцию для обращения к сегменту конкретного индикатора и тому подобное.
Теперь, как и обычно, вы можете скачать исходные файлы со всеми стилями, разметкой и программным кодом.
Demo пример
Скачать исходники
На этом все, желаю вам удачи и отличного настроения!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.