Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 29:

Анимация

< Лекция 28 || Лекция 29: 12 || Лекция 30 >

Задание

Перепишите программу анимации. Пусть первым будет pic1.gif, как в данном примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет "быстро", 1600 — "умеренно", 2400 — "медленно". Запускать анимацию должна текстовая ссылка "Показать анимацию".

Возможное решение

В программу включено окно alert, чтобы показывать значение переменной howfast (как быстро). alert — это хороший инструмент отладки программ. Просмотр значений переменных часто помогает определить, где программа ведет себя не так, как хотелось бы.

Еще обратите особое внимание на параметр sp (speed, скорость) внутри функции startshow(). Он позволяет передавать в функцию данные, которые вводит пользователь.

И последнее — метод toUpperCase(). С его помощью все варианты написания "slow", "Slow", "sLOW" преобразуются в "SLOW". Хороший прием, не правда ли?

Вот сценарий:

<html>
<head>
<SCRIPT type="text/javascript">
    num=1
    img1 = new Image ()
    img1.src = "pic1.gif"
    img2 = new Image ()
    img2.src = "pic2.gif"
    img3 = new Image ()
    img3.src = "pic3.gif"  
    function startshow(sp)
    {
       howfast=1600
       if (sp.toUpperCase() == "SLOW")
         {howfast=2400}
       if(sp.toUpperCase() == "FAST")
         {howfast=800}
       alert(howfast)
       for (i=0; i<21; i=i+1)
          {document.mypic.src=eval("img"+num+".src")
           for(x=1; x<howfast; x=x+1)
             {}
           num=num+1
           if(num==4)
              {num=1}
           }
           document.mypic.src=img1.src
    }
</script>
</head>
<body>
<center>
<form name="myform">
<img src="pic1.gif" name="mypic" border=0>
<p>
Задайте скорость анимации: (fast, medium, slow) <input type="text" value="medium" name="speed">
<p>
<a href="JavaScript:startshow(document.myform.speed.value)">Показать анимацию</a> 
</form>
</center>
</body>
</html>
< Лекция 28 || Лекция 29: 12 || Лекция 30 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Эдуард Семынин
Эдуард Семынин

Здравствуйте.

Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?

 

Alex Chekalov
Alex Chekalov
Украина, Poltava
Виктория Вернер
Виктория Вернер
Украина, Днепропетровск, ДИИТ, 2012