Делаем имитацию семисегментного индикатора на css и jquery

Приветствую вас дорогие друзья! В этом небольшом уроке будет приведен вариант создания семисегментного индикатора.
Делаем имитацию семисегментного индикатора на css и jquery

Что такое семисегментный индикатор? Семисегментный индикатор – это устройство, которое позволяем отображать цифровую информацию (и не только цифровую). Подробнее можно узнать на Википедии.

Их можно встретить повсюду – часы, температура, показания курсов валют и прочие цифровые устройства.

Как и во всех остальных статьях из рубрики – 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 пример

Скачать исходники

На этом все, желаю вам удачи и отличного настроения!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>