Все для Joomla . Бесплатные шаблоны и расширения.

JavaScript. Продолжение 1

Категория: Программирование Обновлено: 14.03.2019 Опубликовано: 12.02.2019 Печать

Пример 1. Распечатка всех ссылок на странице

for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");



Пример 2. Простейшее динамическое меню

<head>
<script>
var data = new Array(
"Фамилия И.О.",        "253-93-10",        "253-93-12",
"проезд",        "5",            "руб.",
"отчет",        "10:00",        "конф. зал.");
var pic = new Array(
"fio.gif",    "rpho.gif",    "hpho.gif",
"kind.gif",    "sum.gif",    "curr.gif",
"target.gif",    "mtime.gif",    "mplace.gif");
function ShowField(m,i)
{
 document.f.elements[i].value = data[3*m+i];
}

function ShowMenu(menu)
{
 document.f.reset();

  for(i=0;i<3;i++)
  {
   document.images[i+3].src = pic[ 3*menu+i ];
   document.links[i+3].href =
   "javascript:ShowField("+menu+","+i+");void(0);";
  }
}
</script>
</head>
<body onLoad="ShowMenu(0);">
<table border=0 cellspacing=1 cellpadding=0 align=center>
<tr>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(0);"><img src=addrpho.gif border=0></a></td>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(1);"><img src=cash.gif    border=0></a></td>
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(2);"><img src=meets.gif   border=0></a></td>
</tr>
<tr>
<td><a href="/"><img src=fio.gif  border=0></a></td>
<td><a href="/"><img src=rpho.gif border=0></a></td>
<td><a href="/"><img src=hpho.gif border=0></a></td>
</tr>
<form name=f >
<th><input value="" size=14></th>
<th><input value="" size=14></th>
<th><input value="" size=14></th>
</form>
</table>

Пример 3. Простейшая динамическая смена изображений

<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic1.src='pic1.gif';"
 onMouseout="document.pic1.src='pic1_.gif';">
 <IMG NAME=pic1 src=pic1_.gif BORDER=0></A></td>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic2.src='pic2.gif';"
 onMouseout="document.pic2.src='pic2_.gif';">
 <IMG NAME=pic2 src=pic2_.gif BORDER=0></A></td>
<td>
<A HREF="javascript:void(0);"
 onMouseover="document.pic3.src='pic3.gif';"
 onMouseout="document.pic3.src='pic3_.gif';">
 <IMG NAME=pic3 src=pic3_.gif BORDER=0></A></td>
</tr>
</table>

Пример 4. Простейшие динамические создания новых страниц

<A HREF="javascript:alert('Спасибо!');">Кликните</A>
<A HREF="javascript: 2+8; 5+7;">ссылка</A>
<A HREF="javascript: '<HTML><BODY><H1>Ready!<H1></BODY></HTML>';">Кликните</A>
<A HREF="javascript: document.bgColor='green';">Кликните</A>

Пример 5. Простейшее изменение цвета фона

<A HREF="javascript: document.bgColor='green'; void(0);">Кликните</A>

Пример 6. Подтверждение действия

<A onClick="return confirm('Продолжить?')"
  HREF="http://www./">Перейти на сайт</A>

 

Пример 7. Бесконечный цикл изменения изображений

<SCRIPT>
var i=0;
function movie()
{
 document.i.src='images/crou00'+i+'.gif';
 i++; if(i>4) i=0;
 setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>

Пример 8. Ограниченный цикл изменения изображений

<SCRIPT>
var i=0,
    n=5; // число циклов
function movie()
{
 document.i.src='images/crou00'+i+'.gif';
 i++; if(i>4) { i=0; n--; }
 if(n>0) setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
</BODY>

Пример 9. Запуск и остановка мультипликации (смены изображений)

<SCRIPT>
var i=0, flag=true;
function movie()
{
 if(flag)
 {
  document.i.src='images/crou00'+i+'.gif';
  i++; if(i>4) i=0;
 }
 setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
       onClick="flag = !flag;">
</FORM>
<IMG NAME=i>
</BODY>

------------------

<SCRIPT>
var i=0, flag=true, m=null;
function movie()
{
 if(flag)
 {
  document.i.src='images/crou00'+i+'.gif';
  i++; if(i>4) i=0;
 }
 m = setTimeout('movie();',500);
}
</SCRIPT>
<BODY onLoad="movie();">
<IMG NAME=i>
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
  onClick="flag = !flag;
  if(flag) movie();
  else clearTimeout(m);">
</FORM>
</BODY>

Пример 10. Защита переноса на следующую строку (<PRE>)

Горизонтально
<PRE>
<IMG SRC="horis1.gif"><IMG
     SRC="horis2.gif"><IMG
     SRC="horis3.gif"><IMG
     SRC="horis4.gif">
</PRE>

Вертикально
<PRE>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21>
<IMG SRC="vert1.gif" WIDTH=103 HEIGHT=21>
<IMG SRC=vert.gif WIDTH=27 HEIGHT=21>
<IMG SRC="vert2.gif" WIDTH=103 HEIGHT=21>
</PRE>

Пример 11. Пункт меню с меняющимся изображением

<A HREF=".htm" onMouseOut="window.status='';"
   onMouseOver="window.status='название ссылки';return true;"><IMG
   SRC="horis1.gif" BORDER=0 ALT="название ссылки"></A>

Пример 12. Простейшее выпадающее меню с изображениями

<SCRIPT>
function submenu(a)
{
 with(document)
 {
  if(a==1)
  {
   item1.src="item_1_yes.gif"; // 1-й пункт активен
   item2.src="item_2_no.gif";  // 2-й пункт неактивен
   subi1.src="item_1_1.gif";   // 1-й пункт вложенного меню 1
   subi2.src="item_1_2.gif";   // 2-й пункт вложенного меню 1
  }
  if(a==2)
  {
   item1.src="item_1_no.gif";  // 2-й пункт активен
   item2.src="item_2_yes.gif"; // 1-й пункт неактивен
   subi1.src="item_2_1.gif";   // 1-й пункт вложенного меню 2
   subi2.src="item_2_2.gif";   // 2-й пункт вложенного меню 2
  }
 }
}
</SCRIPT>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(1);">
    <IMG BORDER=0 NAME=item1 SRC=item_1_yes.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi1 SRC=item_1_1.gif></TD></TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(2);">
    <IMG BORDER=0 NAME=item2 SRC=item_2_no.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi2 SRC=item_1_2.gif></TD></TR>
</TABLE>

 

Пример 13. Управление cookie

Запись имени пользователя на 1 минуту на первой станице
<SCRIPT SRC='cookies.js'></SCRIPT>
<SCRIPT>
setCookie('customername',
          prompt('Введите ваше имя',''),
          TimeAfter(0,0,1)  );
alert('Мы Вас запомнили!');
</SCRIPT>

Чтение имени на второй странице
<SCRIPT SRC='cookies.js'></SCRIPT>
<SCRIPT>
if(existsCookie('customername'))
     alert('Приветствуем Вас, ' +CookieValue('customername')+ '!');
else alert('Извините, мы Вас уже не помним...')
</SCRIPT>

Пример 14. Простейший сценарий

<SCRIPT type="text/javascript">
 document.write
 ("<FONT COLOR='RED'>Это красный текст</FONT><BR>")
 document.write
 ("<FONT COLOR='BLUE'>Это синий текст</FONT>")
</SCRIPT>

Пример 15. Дата

<SCRIPT type="text/javascript">
dothis = new Date()
month = dothis.getMonth()
month = (month * 1) + 1
day = dothis.getDate()
year = dothis.getFullYear()
document.write(" ",month,"/",day,"/",year," ")
</SCRIPT>

 

Пример 16. Вывод точной даты и время посещения страницы

<SCRIPT LANGUAGE="JavaScript">
Now = new Date();
document.write("Сегодня " + Now.getDate()+
"-" + (Now.getMonth()+1) + "-" + Now.getFullYear()
+ ". Вы зашли на Web-страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")
</SCRIPT>

или

<SCRIPT LANGUAGE="JavaScript">
Now = new Date();
var mpo = Now.getMonth();
var mpo1 = mpo + 1;
document.write("<FONT COLOR='green'>Привет! Сегодня у нас:</FONT>"
+ Now.getDate() + "/"
+ mpo1 + "/"
+ Now.getFullYear() + ".");
</SCRIPT>

 

Пример 17. Обработчики событий для ссылки

<A HREF="http://"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Посетите этот сайт';
return true">Щелкните здесь</A>

 

Пример 18. Синтаксис onClick

<A HREF="http://www.mail.ru"
onClick="alert('Посмотреть почту!');">
Щелкните здесь</A>

 

Пример 19. Синтаксис onFocus

<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='Текст в строке состояния';">
</FORM>

 

Пример 20. Синтаксис onBlur

<FORM>
<INPUT TYPE="text" SIZE="40"
VALUE="Впишите свое имя и щелкните вне текстового поля"
onBlur="alert('Вы изменили ответ — вы уверены, что он правильный?');">
</FORM>

 

Пример 21. Синтаксис onChange

<FORM>
<INPUT TYPE="text" SIZE="45"
VALUE="Измените текст и щелкните вне поля — затем
проверьте строку состояния"
onChange="window.status='Текст был изменен'">
</FORM>

 

Пример 22. Синтаксис onSubmit

<FORM>
<INPUT TYPE="submit"
onSubmit="parent.location='спасибо.html'";>
</FORM>

 

Пример 23. Простейшая форма взаимодействия с пользователем

<FORM action="">
Name: <INPUT TYPE="text" SIZE="30"
onFocus="window.status='Введите свое имя';">
Что вы предпочитаете:
<INPUT TYPE="checkbox"
onClick="window.status='Вы выбрали шоколад';">
Шоколад
<INPUT TYPE="checkbox"
onClick="window.status='Вы выбрали мороженое';">
Мороженое
<INPUT TYPE="submit"
onClick="alert('Спасибо за участие в опросе');">
</FORM>

 

Предыдущая часть -->>>

Следующая часть -->>> 

 

Для сайтов находящихся на тарифном обслуживании и администрировании работы проводятся без дополнительной оплаты, входят в стоимость тарифа

По всем вопросам обращаться по адресу: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. или по телефону (WhatsApp): +7-994-009-32-20

 

Поделиться страницей в социальных сетях:

 

Просмотров: 157

Добавить комментарий

Защитный код
Обновить