КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Изменение картинки из формы
Обработка событий элементов формы.
Примеры скриптов
1. Проверка данных, введенных в форме:
<HTML>
<HEAD>
<SCRIPT>
function test_form() {
var ok = false;
if (document.Form1.email.value.length<3) { ok=false; alert('error 1'); }
else if (document.forms[0].elements[0].value.indexOf('@')==-1)
{ ok=false; alert('error 2'); }
else ok=true;
return ok;}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Form1" TARGET=_new>
your email <INPUT TYPE="text" NAME="email" VALUE="12@43"> <BR>
text <INPUT TYPE="text" NAME="data" onChange = "alert('change');"> <BR>
pass <INPUT TYPE="password" NAME="pass" VALUE='123' > <BR>
<BR>
<INPUT TYPE="submit" VALUE="Send form" onClick="return test_form();">.
<INPUT TYPE="reset" VALUE="Clear form" onClick="return confirm('Clear form?');">
</FORM>
</BODY><HTML>
При нажатии кнопки reset выдается запрос пользователю на подтверждение очистки формы. При отрицательном ответе действие по умолчанию (очистка формы) не выполняется. Отмена достигается возвратом в обработчике значения false. Отмена действия по умолчанию для кнопки reset работает только в NN4.0 и выше.
При нажатии кнопки submit проверяется правильность ввода (адрес e-mail должен содержать '@' и иметь не менее трех символов). При ошибке выдается сообщение (функция alert()) и отменяется отправка формы на сервер.
При выборе пункта из меню изменяется картинка в документе.
<HTML><HEAD></HEAD>
<BODY>
<IMG SRC='1.gif'><BR>
<FORM NAME="Form1" TARGET=_new>
<SELECT SIZE=4 onChange="document.images[0].src= this.options[this.selectedIndex].value">
<OPTION VALUE="1.gif">picture 1
<OPTION VALUE="2.gif">picture 2
<OPTION VALUE="3.gif">picture 3
</SELECT>
</FORM>
</BODY><HTML>
Объект this используется для доступа к текущему объекту, в данном случае - select. Если бы мы в обработчике onChange использовали вызов функции JavaScript, то в этой функции мы должны были бы использовать полную адресацию:
document.images[0].src=document.Form1.elements[0]. options[document.Form1.elements[0].selectedIndex].value.
Использование таймера (скроллинг в строке статуса)
<HTML><HEAD>
<SCRIPT>
var mesg0 = 'Ваше сообщение';
var i=0;
function sline() {
if (i<mesg0.length) {
i++;
window.status=mesg0.substring(0,i);
setTimeout('sline()',100);
} }
</SCRIPT>
</HEAD>
<BODY onload="sline()">......
</BODY></HTML>
В данном примере прокрутка сообщения начинается при загрузке документа и выполняется один раз. Обратите внимание на то, что функция setTimeout() планирует только одно событие (в данном случае вызов функции sline()), а не серию вызовов через указанный интервал времени.
Аналогичным образом можно, например, изменять изображение:
<SCRIPT>
var i=0;
function multi() {
if (i) document.images[0].src='2.gif';
else document.images[0].src='1.gif';
i=1-i; //изменение номера изображения
setTimeout('multi()',1000); }
</SCRIPT>
А вот реализация функции задержки с использование объекта Date. В качестве параметра функции передается длительность задержки в миллисекундах.
<SCRIPT>
function pause(mSec) {
clock = new Date();
justMinute = clock.getTime();
while (true) {
just = new Date();
if (just.getTime() - justMinute > mSec) break;
} }
</SCRIPT>
|
|
Дата добавления: 2014-12-27; Просмотров: 326; Нарушение авторских прав?; Мы поможем в написании вашей работы!