Показать сообщение отдельно
  #3 (permalink)  
Старый 12.04.2012, 11:52
Новичок на форуме
Отправить личное сообщение для kingarm Посмотреть профиль Найти все сообщения от kingarm
 
Регистрация: 12.04.2012
Сообщений: 4

Вообще я сейчас и хочу на js сделать просто в тему незнал в какую написать)

нашел скрипт который мне подходит

но там через ul и li а мне нужно просто числа вывести в <div'е, а я их уже css оформлю.

Можешь изменить код чтоб выводились числа а не эти блоки я был бы тебе благодарен очень)

<!DOCTYPE html>
<html>
<head>
	<title>Цифровой дисплей</title>
	<style type="text/css">

		.digits li{
			display: inline-block;
			position: relative;
			width: 62px;
			height: 92px;
			background: #000;
		}
		.digits li span{
			position: absolute;
			display: block;
			background: #f00;
			border: 1px solid #900;
			opacity: 0.3;
			  -moz-border-radius: 2px;
		}
		/* horisontal segments */
		.digits li .segment-1,
		.digits li .segment-4,
		.digits li .segment-7{
			height: 2px;
			width: 44px;
			left: 8px;
		}
		.digits li .segment-1{
			top: 4px;
		}
		.digits li .segment-4{
			top: 84px;
		}
		.digits li .segment-7{
			top: 44px;
		}

		/* vertical segments */
		.digits li .segment-2,
		.digits li .segment-3,
		.digits li .segment-5,
		.digits li .segment-6{
			height: 30px;
			width: 2px;
		}
		.digits li .segment-2{
			top: 10px;
			left: 54px;
		}
		.digits li .segment-3{
			top: 50px;
			left: 54px;
		}
		.digits li .segment-5{
			left: 4px;
			top: 50px;
		}
		.digits li .segment-6{
			top: 10px;
			left: 4px;
		}

		.d0 .segment-1,
		.d0 .segment-2,
		.d0 .segment-3,
		.d0 .segment-4,
		.d0 .segment-5,
		.d0 .segment-6{
			opacity: 1;
		}

		.d1 .segment-2,
		.d1 .segment-3{
			opacity: 1;
		}

		.d2 .segment-1,
		.d2 .segment-2,
		.d2 .segment-4,
		.d2 .segment-5,
		.d2 .segment-7{
			opacity: 1;
		}

		.d3 .segment-1,
		.d3 .segment-2,
		.d3 .segment-3,
		.d3 .segment-4,
		.d3 .segment-7{
			opacity: 1;
		}

		.d4 .segment-2,
		.d4 .segment-3,
		.d4 .segment-6,
		.d4 .segment-7{
			opacity: 1;
		}

		.d5 .segment-1,
		.d5 .segment-3,
		.d5 .segment-4,
		.d5 .segment-6,
		.d5 .segment-7{
			opacity: 1;
		}

		.d6 .segment-1,
		.d6 .segment-3,
		.d6 .segment-4,
		.d6 .segment-5,
		.d6 .segment-6,
		.d6 .segment-7{
			opacity: 1;
		}

		.d7 .segment-1,
		.d7 .segment-2,
		.d7 .segment-3{
			opacity: 1;
		}

		.d8 .segment-1,
		.d8 .segment-2,
		.d8 .segment-3,
		.d8 .segment-4,
		.d8 .segment-5,
		.d8 .segment-6,
		.d8 .segment-7,
		.d8 .segment-8{
			opacity: 1;
		}

		.d9 .segment-1,
		.d9 .segment-2,
		.d9 .segment-3,
		.d9 .segment-4,
		.d9 .segment-6,
		.d9 .segment-7{
			opacity: 1;
		}
	</style>
</head>
<body>
	<ul id="display" class="digits">
		<li>
			<span class="segment-1"></span>
			<span class="segment-2"></span>
			<span class="segment-3"></span>
			<span class="segment-4"></span>
			<span class="segment-5"></span>
			<span class="segment-6"></span>
			<span class="segment-7"></span>
			<span class="segment-8"></span>
		</li>
		<li>
			<span class="segment-1"></span>
			<span class="segment-2"></span>
			<span class="segment-3"></span>
			<span class="segment-4"></span>
			<span class="segment-5"></span>
			<span class="segment-6"></span>
			<span class="segment-7"></span>
			<span class="segment-8"></span>
		</li>
		<li>
			<span class="segment-1"></span>
			<span class="segment-2"></span>
			<span class="segment-3"></span>
			<span class="segment-4"></span>
			<span class="segment-5"></span>
			<span class="segment-6"></span>
			<span class="segment-7"></span>
			<span class="segment-8"></span>
		</li>
	</ul>
	<button onclick="counter.countTo(this.nextSibling.value)">Считать до:</button><input type="text" />
	<script type="text/javascript">
		// конструктор дисплея
		function Display(id)
		{
			// dom-элементы представляющие собой цифры
			this.digits = document.getElementById(id).getElementsByTagName('li');
			// разрядность нашего дисплея
			this.width = this.digits.length;
			// метод для отображения дисплеем нужного числа
			this.set = function(number){
				number = number.toFixed();
				for (var i=number.length; i <this.width; i++){
					number = '0' + number;
				}
				var i = this.width;
				while (i--)
				{
					this.digits[i].className = 'd' + number[i];
				}
			}
		}
		// конструктор счетчика
		function Counter()
		{
			this.value 		=  0;
			this.step 		=  1;
			this.interval	= 100;
			this.countTo = function(to){
				clearInterval(this.intHandler);
				if (this.value == to) return true;
				var self = this;
				var multiplier = (to - this.value < 0) ? -1 : 1;
				this.intHandler = setInterval(function(){
					self.stepBy(multiplier*self.step);
					if (to == self.value) clearInterval(self.intHandler);
				}, this.interval);
			}
			this.stepBy = function(by){
				this.value += by;
				if (this.onStep) {
					this.onStep.call(this, this.value);
				}
			}
		}

		var display = new Display('display');
		display.set(0);
		var counter = new Counter;
		counter.onStep = function () {
			display.set(this.value);
		}
	</script>
</body>
</html>

Последний раз редактировалось kingarm, 12.04.2012 в 12:18.
Ответить с цитированием