Файловый архив студентов. Файловый архив студентов.
1305 вузов, 5174 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Веб программирование.Начало.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
6.96 Mб
Скачать
☆
►Содержание►

5.8. Примеры на JavaScript

Приветствие в зависимости от времени суток

<html> <head>

<title>Привет</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script >

day = new Date();

hour = day.getHours();

if (hour>=5 && hour<12) greeting = "Доброе утро";

else

if (hour>=12 && hour<18) greeting = "Добрый день";

else

if (hour>=18 && hour<24) greeting = "Добрый вечер";

else

if (hour>=0 && hour<5) greeting = "Доброй ночи";

document.write(greeting); </script>

</head>

<body>

</body></html>

<!-- пример 32: создание динамического меню после загрузки страницы -->

<html><head>

<style>

.menuContainer {

border: 1px solid #123456;

}

.menuContainer .menuItem {

float: left;

margin: 2px;

padding: 10px;

}

.menuContainer .menuOver {

background-color: #808080;

}

.menuContainer .menuOver a {

color: #800000;

font-weight: bold;

}

.menuContainer .clear {

clear: left;

}

</style>

<script type="text/javascript">

function processMenu() {

var allDiv = document.getElementsByTagName("DIV");

for (var i = 0; i < allDiv.length; i++) {

if (allDiv[i].className == "menuContainer")

processMenuItem(allDiv[i]);

}

}

function processMenuItem(_obj) {

var allChilds = _obj.childNodes;

for (var i = 0; i < allChilds.length; i++) {

if (allChilds[i].className == "menuItem") {

allChilds[i].onmouseover = function() {

this.className += " menuOver";

}

allChilds[i].onmouseout = function() {

this.className =

this.className.replace(" menuOver","");

}

}

}

}

</script>

</head>

<body onload="processMenu();">

<div class="menuContainer">

<div class="menuItem"><a href="#">first</a></div>

<div class="menuItem"><a href="#">second</a></div>

<div class="menuItem"><a href="#">third</a></div>

<div class="menuItem"><a href="#">fourth</a></div>

<div class="clear"></div>

</div>

</body></html>

<!-- пример pr33: валидация формы -->

<script type="text/javascript">

function submitForm(_form) {debugger;

markErrorField(false);

var errMess = "";

if (!_form.elements["login"].value) {

errMess += "Your Login is empty.\n";

markErrorField(_form.elements["login"]);

}

if (!_form.elements["mail"].value) {

errMess += "Your Email is empty\n";

markErrorField(_form.elements["mail"]);

}

if (!_form.elements["pass"].value) {

errMess += "Your Password is empty.\n";

markErrorField(_form.elements["pass"]);

} else if (!_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation is empty.\n";

markErrorField(_form.elements["confpass"]);

} else if

(_form.elements["pass"].value !=

_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation does not equal to your Password.\n";

markErrorField(_form.elements["pass"]);

markErrorField(_form.elements["confpass"]);

}

if (errMess) {

alert(errMess + "");

return false;

}

}

function markErrorField(_element) {

var allLabels =

document.getElementsByTagName("LABEL");

if (_element) {

for (var i = 0; i < allLabels.length; i++) {

if (allLabels[i].htmlFor == _element.id)

allLabels[i].style.color = "red"; }

} else {

for (var i = 0; i < allLabels.length; i++) {

allLabels[i].style.color = "black";

}

}

}

</script>

<form onsubmit="return submitForm(this);">

<table>

<tr>

<td><label for="login">Your Login</label></td>

<td><input type="text" name="login" id="login" /></td>

</tr>

<tr>

<td><label for="mail">Your Email</label></td>

<td><input type="text" name="mail" id="mail" /></td>

</tr>

<tr>

<td><label for="pass">Your Password</label></td>

<td><input type="password" name="pass" id="pass" /></td>

</tr>

<tr>

<td><label for="confpass">

Confirm Your Password</label></td>

<td><input type="password" name="confpass"

id="confpass" /></td>

</tr>

<tr>

<td colspan="2"><input type="submit"

name="Register" /></td>

</tr>

</table>

</form>

//pr34-Выделение всех чекбоксов (checkbox) в группе

<html>

<head>

<script type="text/javascript">

function checkAll(oForm, cbName, checked)

{

for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked;

}

</script>

</head>

<body>

<form name="form1" method="post" action="">

<input type="checkbox" name="total" value="checkbox" on­Click="checkAll(this.form,'checkbox[]',this.checked)">Отметить все

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">1

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">2

<br>

<input type="checkbox" name="checkbox[]" value="checkbox">3

</form>

</body>

</html>

//pr35- Проверка информации, введенной в форму

<html><head>

<script language="JavaScript">

var ok1=false

function test(form)

{

if (form.text1.value == "")

{

ok1=false

alert("Введите имя!")

}

else

if ((form.text2.value.indexOf('@', 0)<1) ||(form.text2.value.indexOf('@', 0)==

form.text2.value.length-1))

{

ok1=false

alert("Неправильно введён адрес e-mail")

}

else ok1=true

if(ok1)

{

//..............

alert("Форма заполнена!")

}

}

// -->

</script>

</head>

<body>

<form>

Введите Ваше имя:<br>

<input type="text" name="text1">

<br>

Введите Ваш адрес e-mail:<br>

<input type="text" name="text2">

<br><br>

<input type="button" name="button1" value="Проверка" on­Click="test(this.form)">

</form>

</body></html>

//pr36- Анимация элементов страницы – по диагонали.

<html>

<head>

<script>

var dx=1;

var dy=-2;

var timer;

function preloadTime() {

timer=window.setInterval("preloadImg()", 100);

}

function preloadImg() {

animImg.style.pixelTop+=dy;

animImg.style.pixelLeft-= dx;

if (animImg.style.pixelTop + animImg.style.pixelHeight +1 >= docu­ment.body.clientHeight) dy=-dy;

if (animImg.style.pixelTop <=0) dy=-dy;

if (animImg.style.pixelLeft + animImg.style.pixelWidth +2 >= docu­ment.body.clientWidth) dx=-dx;

if (animImg.style.pixelLeft <=0) dx=-dx;

}

</script>

</head>

<body onLoad="preloadTime()">

<img src="2.gif" id="animImg" style="top:80; left:80; position:absolute; width: 196px; height: 183px;">

</body>

</html>

//pr37- Тип браузера.

<html>

<head>

<script type="text/javascript">

function determineIt() {

if (navigator.appName.indexOf ("Avant")!= -1)

location.href="анимация.html";

else

location.href="inner.html";

}

</script>

</head>

<body onLoad="determineIt()">

</body>

</html>

<html>

<head>

<title>Задание №15</title>

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

<script type="text/javascript">

function main(){

window.status = decodeURI(window.location.href);

alert("Текущий адрес: " + decodeURI(window.location.href));

}

</script>

</head>

<body>

<button onclick="main()">Получить URL</button>

</body>

</html>

Цифры не врут…

Неизвестный мудрец

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности