Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Как внедрить цикл в скрипт?


Автор: MNDRK 6.8.2008, 15:13
Есть желание сделать простенькую анимацию, что-то вроде бегущих огней. Написал пока вот это:
Код

<html>
 <head>
  <title></title>
<script language="JavaScript">
 function setbutton1()
{
    window.setTimeout( "setbutton2()", 250);
   var index=1
   var mypic1="4.png";
if(index == 1)
    mypic1="change.png";
document.mypic1.src=mypic1;
}
 function setbutton2()
{
    window.setTimeout( "setbutton3()", 250);
   var index=2
   var mypic2="4.png";
if(index == 2)
    mypic2="change.png";
document.mypic2.src=mypic2;
}
 function setbutton3()
{
    window.setTimeout( "setbutton4()", 250);
   var index=3
   var mypic3="4.png";
if(index == 3)
    mypic3="change.png";
document.mypic3.src=mypic3;
}
 function setbutton4()
{
    window.setTimeout( "setbutton5()", 250);
   var index=4
   var mypic4="4.png";
if(index == 4)
    mypic4="change.png";
document.mypic4.src=mypic4;
}
 function setbutton5()
{
    window.setTimeout( "setbutton6()", 250);
   var index=5
   var mypic5="4.png";
if(index == 5)
    mypic5="change.png";
document.mypic5.src=mypic5;
}
 function setbutton6()
{
    window.setTimeout( "setbutton7()", 500);
   var index=6
   var mypic6="4.png";
if(index == 6)
    mypic6="change.png";
document.mypic6.src=mypic6;
}
 function setbutton7()
{
    window.setTimeout( "setbutton8()", 250);
   var index=0
   var mypic1="4.png";
if(index == 1)
    mypic1="change.png";
document.mypic1.src=mypic1;
}
 function setbutton8()
{
    window.setTimeout( "setbutton9()", 250);
   var index=0
   var mypic2="4.png";
if(index == 2)
    mypic2="change.png";
document.mypic2.src=mypic2;
}
 function setbutton9()
{
    window.setTimeout( "setbutton10()", 250);
   var index=0
   var mypic3="4.png";
if(index == 3)
    mypic3="change.png";
document.mypic3.src=mypic3;
}
 function setbutton10()
{
    window.setTimeout( "setbutton11()", 250);
   var index=0
   var mypic4="4.png";
if(index == 4)
    mypic4="change.png";
document.mypic4.src=mypic4;
}
 function setbutton11()
{
    window.setTimeout( "setbutton12()", 250);
   var index=0
   var mypic5="4.png";
if(index == 5)
    mypic5="change.png";
document.mypic5.src=mypic5;
}
 function setbutton12()
{
    window.setTimeout( "setbutton1()", 500);
   var index=0
   var mypic6="4.png";
if(index == 6)
    mypic6="change.png";
document.mypic6.src=mypic6;
}
</script>
 </head>

<body bgcolor="#FFFFFF" alink="#FF0000" vlink="#FF0000" link="#FF0000" text="#FF0000" Onload="setbutton1()">

<table align="right" width="160" border="0" bgcolor="black">
  <tr cellspacing="0" background="back.png" width="160" height="29"><td align="center"></td></tr><tr><td>
<table width="156" border="0" bgcolor="black">
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic1" border="0" align="left">Ваша реклама</a></td></tr>
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic2" border="0" align="left">Ваша реклама</a></td></tr>
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic3" border="0" align="left">Ваша реклама</a></td></tr>
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic4" border="0" align="left">Ваша реклама</a></td></tr>
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic5" border="0" align="left">Ваша реклама</a></td></tr>
  <tr background="back.png"><td><a href="http://www."><img src="4.png" name="mypic6" border="0" align="left">Ваша реклама</a></td></tr>
</table>
</td></tr>
  <tr cellspacing="0" background="back.png" width="160" height="29"><td align="right"></td></tr></td></tr>
</table>
</html>

Оно то работает, но это не скрипт, а гемморой какой-то, понимаю, что проблему можно решить, используя цикл, скрипт будет короче и проще, но все примеры в инете по использованию циклов написаны для чего угодно, но не для работы с графическими обьектами. Ума не приложу, как его туда засунуть?
Где-то неделю назад начал учить Javascript, это мой первый язык программирования. Так что сильно не пинать, также прошу прощения, если похожая тема уже была, поиск ничего не дал.

Автор: Ockonal 7.8.2008, 14:20
Вообще, не разбирался в скрипте smile Уж больно
Цитата

гемморой какой-то

Делай функцию-шаблон. Например:
Код

var changePict = "change.png";
var myPic="4.png";

function templateSetButton( functionNum, in, picNum ) {
  window.setTimeout( functionNum, 250);
  var index = in;
  picNum = "4.png";
  if( index == in )
    picNum = "change.png";

  document.picNum.src = myPic;
}

Далее сами, а то мне местами не всегда понятен смысл кода.

Автор: MNDRK 7.8.2008, 22:12
Цитата(Ockonal @ 7.8.2008,  14:20)
Вообще, не разбирался в скрипте smile Уж больно
Цитата

гемморой какой-то

Делай функцию-шаблон. Например...

Далее сами, а то мне местами не всегда понятен смысл кода.

Оно и неудивительно, что код непонятен, говорю ведь только пробую писать, никогда таким не занимался. Спасибо за попытку помочь, но мне непонятен сам принцип привязки функции к циклу, как вызывать функцию с помощью цикла изменяя параметры расположенных/ой в ней переменных/ой. Понимаю, что нуб полный, не знаю основных принципов написания скриптов, при этом все-равно что-то калякаю, но если бы сам мог догнать то, что в книгах написано, то сюда не писал бы. Может кто встречал где-то на каком сайте что-то подобное - ткните носом плииз. Или может где-то урок есть с чем-то вроде этого. Это с работой никак не связано - учу для себя, так что срочность не требуется, главное помогите разобраться с основами построения скриптов. Еще раз спасибо.

Автор: NightmareZ 7.8.2008, 23:00
Если ты не можешь понять элементарные основы в книгах, то форум тебе не поможет.

Автор: Ockonal 7.8.2008, 23:57
Цитата

Понимаю, что нуб полный, не знаю основных принципов написания скриптов, при этом все-равно что-то калякаю, но если бы сам мог догнать то, что в книгах написано, то сюда не писал бы. Может кто встречал где-то на каком сайте что-то подобное - ткните носом плииз. Или может где-то урок есть с чем-то вроде этого. Это с работой никак не связано - учу для себя, так что срочность не требуется, главное помогите разобраться с основами построения скриптов. Еще раз спасибо.

Ну что же... Не надо преуменьшать своих возможностей smile Попытаюсь как-то объяснить:

Здесь мы задаем одну переменную( вы постоянно переопределяете ее в каждой функции )
var changePict = "change.png";
Имя вашей картинки. Аналогично верхнему
var myPic="4.png";

А вот сама функция-шаблон. Нужно понять ее суть. Вы, надеюсь, заметили, что все ваши функции похожи и выполняют только одну функцию, просто работает по-разному из-за разной информации( значения переменных ).

functionNum - этот параметр я зря сделал, так как не сразу вник в смысл кода
function templateSetButton( functionNum, in, picNum ) {
  Ниже - тоже выбросить нужно
  window.setTimeout( functionNum, 250);
  var index = in;
  picNum = myPic
  if( index == in )
    picNum = changePict;
  document.picNum.src = myPic;
}

теперь мы сочиняем цикл, который будет проходить по всех рисунках, и выводить их такое-то время:
У нас таких проходов 12 штук:
for( i=0;i<=12; i++ ) {
  Здесь мы будем использовать нашу функцию шаблон:
  выполняем все функции с интервалом таким-то smile
  window.setTimeOut( templateSetButton( i ), 250 );
};

Дальше сами smile Уж поздновато уже у меня ;). Приведу полный код:
Код

function templateSetButton( in, picNum ) {;
  var index = in;
  picNum = myPic
  if( index == in )
    picNum = changePict;
  document.picNum.src = myPic;
}

for( i=0;i<=12; i++ ) {
  window.setTimeOut( templateSetButton( i, mypic1 ), 250 );
};

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)