Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2012, 12:51
Интересующийся
Отправить личное сообщение для Димтрий Посмотреть профиль Найти все сообщения от Димтрий
 
Регистрация: 05.03.2012
Сообщений: 16

вывод поочередно элементов массива
Доброго времени суток! Подскажите пожалуйста с помощью какого плагина или кода решить такую задачу?

Имеется массив, например:
var strings = ['Первая строка', 'Вторая строка', 'Третья строка'];


Имеется блок:
<div id="block" style="width:300px; height:200px; border:#00CC00 solid 2px; padding:10px;"><p id="mini"></p></div


С помощью какой функции, или плагина можно осуществить следующее: элементы массива должны показываться по одному, начиная снизу блока, т.е. сначала появляется первый элемент массива - 'Первая строка', через несколько секунд (2-7 сек) появляется второй элемент массива - 'Вторая строка', причем предыдущий элемент поднимается вверх и т.д.
То есть получается что то ввиде чата. постепенно снизу добавляются новые элементы массива, и предыдущие уходят вверх???
Помоги те пожалуйста, хоть с назвагием плагина, которым это можно осуществить, или функцией??


Заранее спасибо!!!...
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2012, 13:25
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Димтрий
С помощью какой функции,
конкретной функции нет, надо алгоритм писать. Для задержки "вывода" можно (и нужно судя по задаче) использовать setTimeout. Вы хотите анимацию, а одной функцией ее написать на "чистом" js не получится.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2012, 13:45
Интересующийся
Отправить личное сообщение для Димтрий Посмотреть профиль Найти все сообщения от Димтрий
 
Регистрация: 05.03.2012
Сообщений: 16

Сообщение от nerv_ Посмотреть сообщение
Вы хотите анимацию.
Я начал учить JS гдето месяц назад. Поэтому могу ошибаться.
Мне как бы не совсем нужна анимация. Мне нужно что бы цикл останавливался на 5-7 секунд иначинал обрабатывать следующий элемент! Например скрипт:
<div id="block" style="width:300px; height:200px; border:#00CC00 solid 2px; padding:10px;">
<p id="mini"></p>
<script type="text/javascript">
var strings = [	'Первая строка',
			'Вторая строка',
			'Третья строка'
                  ];
$.each(strings, function(){
$('#mini').append(this + '<br>');
});
</script>

Просто выводит подряд все строки в блок по мере выполнения цикла.
Как вот тормознуть его, чтоб он вывел первый элемент, подождал 2-7 сек, вывел второй элемент, и т.д.

Если Вывести все строки массива в HTML и скрыть их, а потом циклом открывать по одной строчке?
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2012, 13:54
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

пример с setTimeout
<div id="test"></div>

<script>
	(function() {
		var arr = [ 'Первая строка', 'Вторая строка', 'Третья строка' ],
			elem = document.getElementById( 'test' ), i = -1;
		return function() {
			if ( ++i < arr.length ) {
				elem.innerHTML += arr[ i ] + '<br>';
				setTimeout( arguments.callee, 2000 );
			}
		}();
	})();
</script>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #5 (permalink)  
Старый 05.03.2012, 14:03
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Димтрий,
для общего развития: в JS нельзя приостановить цикл или что-нибудь ещё. Есть setTimeout, который лишь откладывает определённые действия на какой то промежуток времени, аостальная часть программы продолжает выполняться.
Ответить с цитированием
  #6 (permalink)  
Старый 05.03.2012, 14:07
Интересующийся
Отправить личное сообщение для Димтрий Посмотреть профиль Найти все сообщения от Димтрий
 
Регистрация: 05.03.2012
Сообщений: 16

Спасбо! А сделать опускание строк это уже сложно? То есть высветился первый элемент, потом он опускается на строку ниже высвечиваетсяя второй и т.д. Что бы конечный результат был:
Третья строка
Вторая строка
Первая строка
Ответить с цитированием
  #7 (permalink)  
Старый 05.03.2012, 14:23
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

готово:
<div id="test"></div>
 
<script>
    (function() {
        var arr = [ 'Первая строка', 'Вторая строка', 'Третья строка' ],
            elem = document.getElementById( 'test' ), i = -1;
        return function() {
            if ( ++i < arr.length ) {
                elem.innerHTML = arr[ i ] + '<br>' + elem.innerHTML;
                setTimeout( arguments.callee, 2000 );
            }
        }();
    })();
</script>
Ответить с цитированием
  #8 (permalink)  
Старый 05.03.2012, 14:50
Интересующийся
Отправить личное сообщение для Димтрий Посмотреть профиль Найти все сообщения от Димтрий
 
Регистрация: 05.03.2012
Сообщений: 16

То что надо!! Спасибо огромное.
P.S. Если не трудно подскажите плз что означает:
( ++i < arr.length )

и последнее выражение i=-1
elem = document.getElementById( 'test' ),i = -1

Это так. Чтоб самому понять...
Еще раз спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 05.03.2012, 15:26
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

i=-1
присваиваем переменной-счётчику значение -1

++i < arr.length
1) ++i увеличивает i на еденицу и возвращает новое значение i.
например, если i было -1, то после этого оно будет равным 0
i=-1;
alert(++i)

2) arr.length - просто количество элементов в массиве arr. нумерация массива с 0
3) ( ++i < arr.length ) сравниваем переменную-счётчик с длиной массива, одновременно увеличивая её на 1
Ответить с цитированием
  #10 (permalink)  
Старый 05.03.2012, 15:27
Интересующийся
Отправить личное сообщение для Димтрий Посмотреть профиль Найти все сообщения от Димтрий
 
Регистрация: 05.03.2012
Сообщений: 16

А все это можно сделать с jQuery??
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка массива элементов формы и сохранение Viper jQuery 0 19.01.2012 14:04
Вывод переменного по количеству элементов массива из json ArmagedDance Элементы интерфейса 4 08.06.2011 09:45
Скрипт - запрет на загрузку и вывод элементов 365441010 Events/DOM/Window 16 26.03.2010 14:43
Помогите решить задачку---Найти сумму элементов массива uniQ Общие вопросы Javascript 3 02.05.2009 00:20
вставка элементов массива в текстовую форму по клику olezyk Общие вопросы Javascript 3 21.03.2009 21:01