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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

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

* Ваше имя:

Ваш e-mail:

*