Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 11 лет назад пользователемacc107_3.acc.tula.ru
1 Троицкий Д.И. Интернет-технологии1 Реальные программы на Java Лекция 13 Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing Systems
2 Троицкий Д.И. Интернет-технологии2 Часы Функция вывода времени: function showTime() { day = new Date(); // считали дату и время hrNow = day.getHours(); // разделили на ч. м. с. mnNow = day.getMinutes(); scNow = day.getSeconds(); miNow = day.getTime(); if (mnNow
3 Троицкий Д.И. Интернет-технологии3 Сам HTML-файл: // при загрузке Clock
4 Троицкий Д.И. Интернет-технологии4 Бегущая строка в заголовке var tit = document.title; var c = 0; function writetitle() { document.title = tit.substring(0,c); if(c==tit.length) { c = 0; setTimeout("writetitle()", 3000) } else { c++; setTimeout("writetitle()", 200) } writetitle() // вызов нашей функции
5 Троицкий Д.И. Интернет-технологии5 Переливающиеся ссылки function initArray() { for (var i = 0; i < initArray.arguments.length; i++) { this[i] = initArray.arguments[i]; } this.length = initArray.arguments.length; } var colors = new initArray( "red", "blue", "green", "purple", "black", "tan", "red"); delay =.5; // seconds link = 0; vlink = 2; function linkDance() { link = (link+1)%colors.length; vlink = (vlink+1)%colors.length; document.linkColor = colors[link]; document.vlinkColor = colors[vlink]; setTimeout("linkDance()",delay*1000); } linkDance();
6 Троицкий Д.И. Интернет-технологии6 Скроллинг фона var backgroundOffset = 0; var bgObject = eval('document.body'); function scrollBG(maxSize) { backgroundOffset = backgroundOffset + 1; if (backgroundOffset > maxSize) backgroundOffset = 0; bgObject.style.backgroundPosition = "0 " + backgroundOffset; } var ScrollTimer = window.setInterval("scrollBG(307)", 20);
7 Троицкий Д.И. Интернет-технологии7 Выделение ячеек таблицы Стиль обычной ячейки: td { border: 5px solid gray; } Функции смены стиля: function onm(th) { th.style.border="5px solid red"; } function outm(th) { th.style.border="5px solid gray"; }
8 Троицкий Д.И. Интернет-технологии8 Собственно таблица: Text 1 Text 2 Text 3 Text 4 Text 5 Text 6
9 Троицкий Д.И. Интернет-технологии9 Обработка нажатий клавиш Реакция на нажатия клавиш в окне браузера: document.onkeydown=key; function key() { window.status=event.keyCode; if(event.keyCode==27)alert("Куда собрался?!"); }
10 Троицкий Д.И. Интернет-технологии10 Проверка вводимых в форму данных Форма с двумя полями ввода (имя и ): Введите Ваше имя: Введите Ваш адрес
11 Троицкий Д.И. Интернет-технологии11 var ok1=false; function test(form) { if (form.text1.value == "") { ok1=false; alert("Введите имя!"); } else if
12 Троицкий Д.И. Интернет-технологии12 Звездочки Создаем стиль:.spanstyle { position:absolute; visibility:visible; } Глобальные переменные: var xpos=new Array();//Массив x-координаты слоев var ypos=new Array();//Массив y-координаты слоев var f=0;//Угол поворота var rx=300;//x-координата центра var ry=300;//y-координата центра var r1=0;//Радиус первой окружности движения звёздочек var r2=0;//Радиус второй окружности движения звёздочек var flag1=true;//Флаг огранич. Нараст. радиуса второй окружности //Инициализируем массив координат for (i=0; i
13 Троицкий Д.И. Интернет-технологии13 Функция прорисовки function make() { r1++;//Увеличиваем радиус на единицу if(flag1) r2++//Если истина увеличиваем радиус на единицу else r2--;//уменьшаем радиус на единицу if(r1>200) r1=0;//Если радиус больше 200 радиус=0 //Меняем флаг по условию: if(r2>100) flag1=false; if(r2
14 Троицкий Д.И. Интернет-технологии14 //Располагаем звёздочки по окружности c=1.35; xpos[0]=rx-r1; ypos[0]=ry; xpos[1]=rx-r1/c; ypos[1]=ry-r1/c; xpos[2]=rx; ypos[2]=ry-r1; xpos[3]=rx+r1/c; ypos[3]=ry-r1/c; xpos[4]=rx+r1; ypos[4]=ry; xpos[5]=rx+r1/c; ypos[5]=ry+r1/c; xpos[6]=rx; ypos[6]=ry+r1; xpos[7]=rx-r1/c; ypos[7]=ry+r1/c;
15 Троицкий Д.И. Интернет-технологии15 //Располагаем второй ряд звёздочек по окружности //и поворачиваем их относительно центра f++; f1=Math.cos(f); f2=Math.sin(f); xpos[8]=(rx-r2)*f1-ry*f2-rx*f1+ry*f2+rx; ypos[8]=(rx-r2)*f2+ry*f1-rx*f2-ry*f1+ry; xpos[9]=(rx-r2/c)*f1-(ry-r2/c)*f2-rx*f1+ry*f2+rx; ypos[9]=(rx-r2/c)*f2+(ry-r2/c)*f1-rx*f2-ry*f1+ry; xpos[10]=rx*f1-(ry-r2)*f2-rx*f1+ry*f2+rx; ypos[10]=rx*f2+(ry-r2)*f1-rx*f2-ry*f1+ry; xpos[11]=(rx+r2/c)*f1-(ry-r2/c)*f2-rx*f1+ry*f2+rx; ypos[11]=(rx+r2/c)*f2+(ry-r2/c)*f1-rx*f2-ry*f1+ry; xpos[12]=(rx+r2)*f1-ry*f2-rx*f1+ry*f2+rx; ypos[12]=(rx+r2)*f2+ry*f1-rx*f2-ry*f1+ry; xpos[13]=(rx+r2/c)*f1-(ry+r2/c)*f2-rx*f1+ry*f2+rx; ypos[13]=(rx+r2/c)*f2+(ry+r2/c)*f1-rx*f2-ry*f1+ry; xpos[14]=rx*f1-(ry+r2)*f2-rx*f1+ry*f2+rx; ypos[14]=rx*f2+(ry+r2)*f1-rx*f2-ry*f1+ry; xpos[15]=(rx-r2/c)*f1-(ry+r2/c)*f2-rx*f1+ry*f2+rx; ypos[15]=(rx-r2/c)*f2+(ry+r2/c)*f1-rx*f2-ry*f1+ry;
16 Троицкий Д.И. Интернет-технологии16 //Изменяем положение каждого слоя for (i=0; i
17 Троицкий Д.И. Интернет-технологии17 Хвост Стиль надписи – «хвоста»:. spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:Verdana; font-weight:bold; color:#ff0000; } top:-50px - положение по высоте; font-size:8pt - размер шрифта; font-family:Verdana - сам шрифт; font-weight:bold - начертание; color:#ff цвет.
18 Троицкий Д.И. Интернет-технологии18 Объявляем переменные: var x,y var step=10 var flag=0 var message=ACC Forever!!! var xpos=new Array() var ypos=new Array() Здесь: x,y -переменные хранят координаты курсора мыши; step=10 - расстояние между символами в надписи; flag=0 - флаг события; message- надпись, выводимая за курсором мыши; xpos=new Array() - массив содержащий x-координаты символов; ypos=new Array() – массив, содержащий y-координаты символов Разбиваем надпись на массив символов: message=message.split("")
19 Троицкий Д.И. Интернет-технологии19 Инициализируем все x и y координаты числом -50, для того чтобы изначально не было видно надписи (загоняем ее за экран): for (i=0;i
20 Троицкий Д.И. Интернет-технологии20 Объявляем функцию реализующею весь алгоритм прорисовки символов. function makesnake() { Меняем все (кроме начальных) рядом стоящие x-координаты и сдвигаем их на шаг step, так же меняем рядом стоящие y-координаты местами. for (i=message.length; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } Начальную x-координату приравниваем x-координате курсора мыши со сдвигом на шаг step, а начальную y-координату просто приравниваем y-координате курсора мыши xpos[0]=x+step ypos[0]=y
21 Троицкий Д.И. Интернет-технологии21 Тут получаем каждую структуру в переменную thisspan и сдвигаем её в указанные координаты. for (i=0; i<message.length; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } Повторяем функцию makesnake() каждые 30 мсек. var timer=setTimeout("makesnake()",30) }
22 Троицкий Д.И. Интернет-технологии22 Устанавливаем обработчик события мыши: if (document.layers) {document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=handlerMM; //--> При загрузке выполняем функцию makesnake()
23 Троицкий Д.И. Интернет-технологии23 Документ в новом окне function newWindow() { window1= open("", "displayWindow","width=500,height=400,status=yes, toolbar=yes,menubar=yes"); // открываем объект document для последующей печати window1.document.open(); // генерируем новый документ window1.document.write(" Новое окно!!!"); window1.document.write(" "); window1.document.write("Данный документ был создан с помощью JavaScript!"); window1.document.write(" "); // закрываем документ window1.document.close(); }
24 Троицкий Д.И. Интернет-технологии24 Анимированная ссылка document.onmouseover = domouseover; document.onmouseout = domouseout; var linkTimeout = ""; function showArrow(activeArrowID, linkName) { for (i=0;i 2) { activeArrowID = 0; } linkTimeout = setTimeout("showArrow(" + activeArrowID + ', "' + linkName + '"' + ")", 120); }
25 Троицкий Д.И. Интернет-технологии25 function hideArrows(linkName) { for (i=0;i -1) { var linkName = srcElement.id; document.all[linkName + "Bracket"][0].style.color = "black"; document.all[linkName + "Bracket"][1].style.color = "black"; showArrow(0, linkName); } function domouseout() { srcElement = window.event.srcElement; if (srcElement.className.indexOf("Link") > -1) { var linkName = srcElement.id; hideArrows(linkName); clearTimeout(linkTimeout); document.all[linkName + "Bracket"][0].style.color = ""; document.all[linkName + "Bracket"][1].style.color = ""; } -1) { var linkName = srcElement.id; hideArrows(linkName); clearTimeout(linkTimeout); document.all[linkName + "Bracket"][0].style.color = ""; document.all[linkName + "Bracket"][1].style.color = ""; }">
26 Троицкий Д.И. Интернет-технологии26 Светящаяся ссылка.nav { COLOR: #ffff00; FONT-FAMILY: arial; FONT-SIZE: 10pt; LEFT: 150px; POSITION: absolute; TEXT-DECORATION: none} Глобальные переменные: var i_strength=0 var max_strength=6 var shadowcolor="red" var timer var speed=50 var thisobj
27 Троицкий Д.И. Интернет-технологии27 function stopfilter(thisdiv){ if (document.all) { clearTimeout(timer) thisobj=thisdiv thisobj.style.filter=" " } function startfilter(thisdiv){ if (document.all) { clearTimeout(timer) thisobj=thisdiv morefilter() } function morefilter(){ if (i_strength
28 Троицкий Д.И. Интернет-технологии28 } function lessfilter(){ if (i_strength >=0) { thisobj.style.filter="glow(color="+shadowcolor+", strength="+i_strength+")" i_strength-- timer = setTimeout("lessfilter()",speed) } else { clearTimeout(timer) morefilter() }
29 Троицкий Д.И. Интернет-технологии29 Угадай число //Переменная хранит количество пунктов меню var lengthArr //Функция создает выпадающее меню //с случайным количеством пунктов function NewLinks() { //Получаем случайное число lengthArr=Math.ceil(Math.random()*20); //Задаем количество пунктов меню document.myForm.myLinks.length=lengthArr //Присваиваем каждому пункту значение и надпись for (var i=1; i
30 Троицкий Д.И. Интернет-технологии30 //Функция проверяет совпадение случайного числа //с значением выбранного пункта function changeL(link) { //Загадываем число rndValue=Math.ceil(Math.random()*lengthArr); //Создаем окно win=window.open("","","width=450,height=300,status=no,men ubar=no,toolbar=no, scrollbars=no") //Пишем в созданое окно номер выбранного пункта // win.document.write("Вы выбрали ссылку "+link.value) //Если числа совпали выводим поздравления!!! //иначе вам не повезло if(rndValue==link.value) win.document.write(" И случайное значение выпало "+ rndValue+". Вам повезло!!!") else win.document.write(" Cлучайное значение выпало "+ rndValue+". Вам не повезло :((") }
31 Троицкий Д.И. Интернет-технологии31
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.