Делаем имитацию семисегментного индикатора на 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 пример

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

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


Раздел: Программирование

Дата последнего изменения: 2015-10-24 18:28:06

Просмотров: 11439

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*