2 Описание скриптов
Время
<script>
var i=0,h,m,s; \\ инициализируем переменные
var hs,ms,ss; \\ инициализируем переменные ( для того, чтобы время
выводилось в формате: чч:мм:сс)
function Tic() \\ функция вывода времени
{
t=new Date(); \\ записывает в переменную t текущее время
i++; // увеличивает на 1
h=t.getHours(); \\ возвращает час
if(h<10) \\ проверяет условие : значение часа меньше 10
{
hs="0"+s;} \\ если условие верно к началу прибавляется 0
else
{hs=h;} \\ иначе записывается так, как есть
m=t.getMinutes(); //возвращает минуты
if(m<10) \\ проверяет условие : значение минут меньше 10
{
ms="0"+m;} \\ если условие верно к началу прибавляется 0
else
{ms=m;} \\ иначе записывается так, как есть
s=t.getSeconds();\\ возвращает секунды
if(s<10) \\ проверяет условие : значение секунд меньше 10
{
ss="0"+s;} \\ если условие верно к началу прибавляется 0
else
{ss=s;} \\ иначе записывается так, как есть
vr.innerText=hs+":"+ms+":"+ss+""; \\ в переменную гипертекста «vr»
записывается hs+":"+ms+":"+ss+""(т.е. время в формате чч:мм:сс)
timer=setTimeout("Tic()",1000); \\ обновляется каждую секунду
}
</script>
<body onload=Tic()>\\ при загрузке страницы запускаются часы
<div id=vr>Время</div> \\ создаётся блок
</body>
Календарь
<script>
calendar = new Date(); \\ заносим в переменную системную дату
day = calendar.getDay() \\ в переменную заносим день недели
document.write("<table width=150 border=1 align=center
bgcolor=#CFCFCF><tr><td><center><font size=3>") \\ создаем таблицу
if (day == 0) { \\ проверка на дни недели, если 0,то воскресенье
document.write("<font color=#000000>Воскресенье</font>")
}
if (day == 1) { \\ проверка на дни недели, если 1,то понедельник
document.write("Понедельник")
}
if (day == 2) { \\ проверка на дни недели, если 2,то вторник
document.write("Вторник")
}
if (day == 3) {
document.write("Среда") \\ проверка на дни недели, если 5,то среда
}
if (day == 4) { \\ проверка на дни недели, если 4,то четверг
document.write("Четверг")
}
if (day == 5) {
document.write("Пятница") \\ проверка на дни недели, если 5,то пятница
}
if (day == 6) { \\ проверка на дни недели, если 6,то суббота
document.write("<font color=#000000>Суббота</font>")
}
document.write("</font></center></td></tr><tr><td><center><font size=3>")
month = calendar.getMonth(); \\в переменную заносится месяц
if (month == 0) { \\ если 0, то январь
document.write("Январь")
}
if (month == 1) { \\ если 1, то февраль
document.write("Февраль")
}
if (month == 2) { \\ если 2, то март
document.write("Март")
}
if (month == 3) { \\ если 3, апрель
}
if (month == 4) { \\ если 4, то май
document.write("Май")
}
if (month == 5) { \\ если 5, то июнь
document.write("Июнь")
}
if (month == 6) { \\ если 6, то июнь
document.write("Июль")
}
if (month == 7) { \\ если 7, то февраль
document.write("Август")
}
if (month == 8) { \\ если 8, то сентябрь
document.write("Сентябрь")
}
if (month == 9) { \\ если 9, то октябрь
document.write("Октябрь")
}
if (month == 10) { \\ если 10, то ноябрь
document.write("Ноябрь")
}
if (month == 11) { \\ если 11, то декабрь
document.write("Декабрь")
}
document.write("</font></center></td></tr><tr><td><center><font size=6>")
date = calendar.getDate(); \\ в переменную заносится текущая дата
document.write(date) \\ выводит на экран дату
document.write("</font></center></td></tr><tr><td><center><font size=2>")
year = calendar.getYear(); \\ в переменную записывается текущий год
if (year < 100) {
document.write("19" + year + "")
}
else if (year > 1999) { \\ если меньше 1999 , то просто выводит год
document.write(year)
}
document.write("</font></center></td></tr></table>")
</script>
Дни недели
<Script>
now = new Date() \\в переменную now заносится системное время
if (now.getDay() == 0) \\ сравнение данного дня недели с 0 (значит воскресенье)
document.write("Отдыхайте, завтра рабочий день...") \\ вывод на экран
сообщения
if (now.getDay() == 1) \\ сравнение данного дня недели с 1 (значит понедельник)
document.write("Сегодня понедельник - настраивайтесь на
работу")\\вывод на экран сообщения
if (now.getDay() == 2) \\ сравнение данного дня недели с 2 (значит вторник)
document.write("Уже вторник, понедельник к счастью позади!")\\ вывод
на экран сообщения
if (now.getDay() == 3) \\ сравнение данного дня недели с 3(значит среда)
document.write("Половина недели позади - сегодня уже среда")\\ вывод
на экран сообщения
if (now.getDay() == 4) \\ сравнение данного дня недели с 4 (значит четверг)
document.write("Сегодня четверг, скоро выходные...")\\ вывод на экран
сообщения
if (now.getDay() == 5)\\ сравнение данного дня недели с 5 (значит пятница)
document.write("Сегодня пятница - последний рабочий день") \\ вывод
на экран сообщения
if (now.getDay() == 6)\\ сравнение данного дня недели с 6 (значит суббота)
document.write("Сегодня первый день выходных!")\\вывод на экран
сообщения
</Script>
Галерея
<script>
var nomerPic=1;\\ переменной присваиваем значение 1
function smena(k)\\ объявляется функция
{
nomerPic+=k;\\ переменная увеличивается на k
if (nomerPic==16) \\ если переменная равна 16,то ей присваивается значение 1
{
nomerPic=1;
}
if (nomerPic==0) \\ если переменная равна 0,то ей присваивается значение 15
{
nomerPic=15;
}
pic.src=nomerPic+".jpg"\\в переменную Pic заносится следующее значение
}
</script>
<img name=pic src="1.jpg" width=550 height=400><br> \\ вставляем
изображение
<input type=button value="Назад" onclick=smena(-1) > \\ создаём кнопку "Назад"
<input type=button value="Вперёд" onclick=smena(+1) >\\ создаём кнопку
"Вперёд"
Приветствие
<script type="text/javascript"> >\\язык программирования var h=(new Date()).getHours();\\ if (h > 23 || h < 7) document.write("Доброй ночи!");\\если время от 00 00 до 6 00 то ночь if (h > 6 && h < 12) document.write("С добрым утром!"); !");\\если время от 7 00 до 11 00 то утро if (h > 11 && h < 19) document.write("Добрый день!"); !");\\если время от 12 00 до 18 00 то день if (h > 18 && h < 24) document. write("Добрый вечер!"); !");\\если время от 19 00 до 23 00 то вечер </script>
3 ОПИСАНИЕ CSS
Границы
<STYLE type="text/css">
html,body \\ тело
{
margin:0px; \\ задаёт величину отступа
padding:0px; \\ задаёт величину поля
}
</STYLE>
Горизонтальное меню
<STYLE>
#menu{
width:100%;\\ задаёт ширину
margin:0; \\ задаёт величину отступа
padding:0; \\ задаёт величину поля
}
#menu ul{\\ элемент списка
list-style:none; атрибут, позволяющий задавать стиль маркера
}
#menu li{\\ элемент списка
list-style:none; \\ атрибут, позволяющий задавать стиль маркера
display:block; \\ элемент будет отображаться, как элемент блокового уровня.
float:left; указывает, что элемент является плавающим и задает его выравнивание влево
}
#menu li a{\\ элемент списка
font-family:sans-serif; \\ задаёт шрифт текста
display:block; \\ элемент показывается как блочный
float:left; \\ указывает, что элемент является плавающим и задает его выравнивание влево
height:50px; \\ высота
color:#F4F4F4; \\ цвет
font-size:18px; \\размер
font-weight:bold; \\ отображает текст жирным
}
background:url(images/menu_left.png) no-repeat left; \\ загружает изображение
line-height:49px; \\ высота линий
padding:0 0 0 20px; \\ задаёт внешнюю величину поля
text-decoration:none; \\удаление подчёркивания
}
#menu li a span{
display:block; \\ элемент будет отображаться, как элемент блокового уровня.
float:left; указывает, что элемент является плавающим и задает его выравнивание влево
background:url(images/menu_right.png) no-repeat right;
height:50px; \\ высота
color:#F4F4F4; \\ цвет
line-height:49px; \\ высота линии
padding:0 20px 0 0; \\ задаёт внешнюю величину поля
}
#menu li a:hover span{
display:block; \\ элемент будет отображаться, как элемент блокового уровня.
float:left; указывает, что элемент является плавающим и задает его выравнивание влево
background:url(images/menu_left_h.png) no-repeat left;
height:50px; \\ высота
}
#menu li a:hover span{
display:block; \\ элемент будет отображаться, как элемент блокового уровня
float:left; указывает, что элемент является плавающим и задает его выравнивание влево
background:url(images/menu_right_h.png) no-repeat right;
color:#000; \\ цвет
height:50px; \\ высота
}
</STYLE>
Горизонтальное меню
<STYLE>
ul {\\ маркерованный список
list-style: none; \\ атрибут, позволяющий задавать стиль маркера
margin: 0; \\ позволяет задать величину отступа
padding: 0; \\ позволяет задать величину поля
}
#menu14 {
width: 200px; \\ ширина
margin: 10px; \\ позволяет задать величину отступа
}
#menu14 li a {\\ элемент списка
height: 32px; \\ высота
voice-family: "\"}\"";
voice-family: inherit;
height: 24px; \\ высота
text-decoration: none; \\удаление подчёркивания
}
#menu14 li a:link, #menu14 li a:visited {
color: #000; \\ цвет
display: block; \\ элемент будет отображаться, как элемент блокового уровня
background: url(menu14.gif); \\ загружается фоновая картинка
padding: 8px 0 0 10px; \\ задаёт внешнюю величину поля
}
#menu14 li a:hover, #menu14 li #current {
color: #8a2be2; \\ цвет
background: url(menu14.gif) 0 -32px; \\ загружается фоновая картинка
padding: 8px 0 0 10px;} \\ задаёт внешнюю величину поля
</STYLE>
Часы
<STYLE>
#vr{color:#1C1C1C; \\ задаёт цвет
text-align:right; \\ размещение текста (справа)
font-size: 25px; \\размер
font-family: Comic Sans MS; \\ параметр шрифта
font-weight:bold;} \\ отображает жирным
</STYLE>
ЗАКЛЮЧЕНИЕ
В проделанной работе были закреплены теоретические знания, полученные на занятиях по дисциплине «информационные технологии».
Готовая курсовая работа состоит из небольшого количества страниц, передвижение по которым осуществляется при помощи меню. На сайте можно узнать много полезной информации о том, как ухаживать за своими любимцами и сделать их жизнь наиболее благоприятной. Думаю, этот сайт заинтересует людей, которые любят таких милых и безобидных животных как морские свинки.
В техническом плане сайт состоит из 11 html страничек и документа style.css, содержит 5 скриптов, 27 картинок и 13 анимационных картинок.
СПИСОК ЛИТЕРАТУРЫ
-
Гончаров А. Самоучитель HTML- СПб.: Питер, 2002. – 240 с.: ил. ISBN 5-272-00072-2
-
Дронов В.А. JavaScript в WЕВ-Дизайне. - СПб.: БХВ-Петербург, 2003. – 354 с.: ил. ISBN 5-304-00489-Х
-
Матросов А.В. HTML 4.0. – СПб.: БХВ-Петербург, 2003. – 672 с.: ил. ISBN 5-8206-0072-Х
-
Мержевич В.А. HTML и CSS на примерах. – СПб.: БХВ-Петербург, 2005. – 448 с.: ил. ISBN 5-94157-360-Х