| Есть ли практическая часть у курса повышения квалификации «web-дизайн»? |
Инспектор группы
Вы можете этот курс.
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 29:
Анимация
Задание
Перепишите программу анимации. Пусть первым будет 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>
