Функция задержки - JavaScript, Ajax

Kapitann · 19.08.2010, 18:34

Пробую для эксперимента написать чтоб при нажатии на кнопку происхдила задержка картинки, но при нажатии на кнопку ничего не происходит, не знаю почему, как исправить?

Код:

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var a,b,timeout,zadershka;

function f(){
zadershka = setTimeout(
function() {
if(!b)
b = document.getElementById('maks');
b.style.display='block';},
2000);
};

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая 
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' id='maks' onClick='f3()'>
<div id="tak" style="display:none; position:absolute; 
left:300px; top:0px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

motorway · 19.08.2010, 18:45

Почему функция называется f, а там указано f3?

Greblin · 19.08.2010, 18:49

Цитата:

Сообщение от motorway

Почему функция называется f, а там указано f3?

Плюс Вы находите не тот идентификатор. Вам надо tak, а получаете maks

Kapitann · 19.08.2010, 20:10

Исправил. Вот так тоже не работает.

Код:

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var a,b,timeout,zadershka;

function f(){
zadershka = setTimeout(
function() {
if(!b)
b = document.getElementById('maks');
b.style.display='block';},
2000);
};

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая 
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' id='maks' onClick='f()'>
<div id="maks" style="display:none; position:absolute; 
left:300px; top:0px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Я хочу при нажатии на кнопку, чтоб картинка повисела 2 секунды и исчезла
Так не выходит.

Виталий Желтяков · 19.08.2010, 20:51

Вот Вам рабочий код:

Код:

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var a,b,timeout,zadershka;

function f(){
	zadershka = setTimeout(
		function() {
			if (!b) {
				b = document.getElementById('maks2');
				b.style.display='block';
			}
		},	2000);
};

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая 
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' id='maks' onClick='f()'>
<div id="maks2" style="display:none; position:absolute; 
left:300px; top:0px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Во-первых, Вы пропустили одну "}" в вашей функции. Учитесь пользоваться табуляцией.
Во-вторых, у Вас две переменные с одним id - "maks", поэтому document.getElementById возвращал первый найденный элемент, а не то что вам нужно. Никогда не задавайте элементы с одинаковым id.

Kapitann · 19.08.2010, 21:26

Спс.
Скажите ,а как сделать чтоб после нажатия на кнопку, картинка выехала вниз например на 200 пикселей вниз, постояла, 2 секунды и заехала обратно в верх в о пикселей, я хочу попробовать сделать, вы скажите, как примерно это сделать,я не знаю как, хочу чисто на Яваскрипте попробовать понять как это делается.
Я хочу чтоб выезжала как картинка, это масив нужно создавать а оптом циклом проходится ил как? Я вообще думаю может нужно, как-то вот так b.style.top = '200px'; получать доступ в цикле и менять позицию может так надо?
Но как изменять пиксели за каждой итерацией?

Kapitann · 19.08.2010, 23:57

Какой-то бред немного выходит, не работает, выдаёт ошибку что в строке 26, символ 1 ожидается объект.

Код:

<html>
	<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
      var a,pause;

function f(){
var a = document.getElementById('maksImg');
a.style.display = 'block';

for(var i=0; i<10; i++){
a.style.top = '0px'+'1px';

};
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:0px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

Kapitann · 20.08.2010, 01:28

Вот так сработало:

Код:

<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
      var a,pause;

var id, i, dir;

function g(){
var a = document.getElementById('maksImg');

/*если i < 50;  то получается i+'px',  а если больше 50, то top  ставится равным '50'+'px'*/

a.style.top = (i<50)?i:'50'+'px';
if (dir==1) i++; else i--;
if (i >= 70) dir=-1;
if (i < -90) {
clearInterval(id);
a.style.display = 'none';
}}

function f(){
var a = document.getElementById('maksImg');
a.style.display = 'block';

i=-90;dir=1;
id = setInterval("g()",50);

}
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

Виталий Желтяков · 20.08.2010, 07:38

Если Вы собираетесь заниматься такой ерундой (картинка появилась через 2 сек, картинка сдвинулась,...), то сразу используйте jQuery.

Kapitann · 20.08.2010, 18:20

По поводу предыдущего кода.

Код:

<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
var a, pause = 1500,
	    id, i, dir;
	 
	function g() {
	    var b = document.getElementById("maksImg");
	    b.style.top = i < 50 ? i : "50"+"px";
	    if (dir == 1) i++;
	    else i--;
	    if (i >= 50) {
	        dir = -1;
	       clearInterval(id);
	        window.setTimeout('id = setInterval("g()",1)', pause);
	   }
	    if (i < -90) {
        clearInterval(id);
	        b.style.display = "none"
	    }
	}
	 function f() {
	 //   if(id)clearInterval(id);
	    document.getElementById("maksImg").style.display = "block";
	    i = -90;
	    dir = 1;
	    id = setInterval("g()", 10);
}
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

Возникла проблема нельзя сделать резкий выезд, остановку и заезд назад картинки вверх браузера этим кодом, она движется но не резко, даже если сетинтервал поставить в 1, резко двигаться не будет картинка, что можно сделать?

19.08.2010, 18:45	#2
motorway Участник клуба Регистрация: 28.06.2009 Сообщений: 1,950	Почему функция называется f, а там указано f3? Скрипты PHP, VBA. Skype:ktmtramway Расписание электричек Быстрый проверенный хостинг.

19.08.2010, 21:26	#6
Kapitann Заблокирован Регистрация: 26.07.2010 Сообщений: 160	Спс. Скажите ,а как сделать чтоб после нажатия на кнопку, картинка выехала вниз например на 200 пикселей вниз, постояла, 2 секунды и заехала обратно в верх в о пикселей, я хочу попробовать сделать, вы скажите, как примерно это сделать,я не знаю как, хочу чисто на Яваскрипте попробовать понять как это делается. Я хочу чтоб выезжала как картинка, это масив нужно создавать а оптом циклом проходится ил как? Я вообще думаю может нужно, как-то вот так b.style.top = '200px'; получать доступ в цикле и менять позицию может так надо? Но как изменять пиксели за каждой итерацией? Последний раз редактировалось Kapitann; 19.08.2010 в 23:10.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
не работает таймер задержки	shuhermayer	Общие вопросы C/C++	3	25.03.2010 23:05
время задержки приема байт	varelik	Общие вопросы Delphi	4	14.12.2009 09:58
LPT и 1 мкс задержки!	MadGest	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	1	05.04.2009 13:59
метод для задержки времени	wwwbaltazor	JavaScript, Ajax	2	23.03.2009 22:30
Временные задержки	dgoc	Помощь студентам	1	05.12.2007 05:03

20.08.2010, 07:38	#9
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Если Вы собираетесь заниматься такой ерундой (картинка появилась через 2 сек, картинка сдвинулась,...), то сразу используйте jQuery.