 |
A$-iam |
||||
Урок по созданию календаря Javascript
Сначала создадим html документ с textarea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head><body>
<form name="myform1">
<textarea rows="3" type="text" name="textdate" id="textdate" size="40" readonly></textarea></form>
</body>
</html>
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head><body>
<form name="myform1">
<textarea rows="3" type="text" name="textdate" id="textdate" size="40" readonly></textarea></form>
</body>
</html>
Добавим функцию, которая определяет дату и вставляет его в документ, между тегами <head> и </head>
<head>
<script>
<!--
//Функция al
function al(){
//Получение даты и времени
idate = new Date();
//Разделение времени на года, дни и месяцы
iyear = idate.getFullYear();
iday = idate.getDate();
imonth = idate.getMonth();
ined = idate.getDay();
//вставка значения в textarea (id="textdate")
document.myform1.textdate.value="Сегодня\n"+iday+" "+imonth+" "+iyear+" года\n"+ined;
}
//-->
</script> </head>
<script>
<!--
//Функция al
function al(){
//Получение даты и времени
idate = new Date();
//Разделение времени на года, дни и месяцы
iyear = idate.getFullYear();
iday = idate.getDate();
imonth = idate.getMonth();
ined = idate.getDay();
//вставка значения в textarea (id="textdate")
document.myform1.textdate.value="Сегодня\n"+iday+" "+imonth+" "+iyear+" года\n"+ined;
}
//-->
</script> </head>
Вызов этой функции при загрузке документа в теге body
<body onLoad="al();">
задание переменных после тега body
<body onLoad="altime();">
<script>
<!--
//задание переменных
var bned;
var idate;
var iyear;
var iday;
var ined;
var imonth;
var ifullmonth;
//-->
</script>
<script>
<!--
//задание переменных
var bned;
var idate;
var iyear;
var iday;
var ined;
var imonth;
var ifullmonth;
//-->
</script>
Если вы сейчас загрузите документ в браузер, месяц и день недели будут отображаться числами
Чтобы этого избежать, создадим еще две функции(впишем между тегами <head> и <head>):
//функция замены значения переменной дня недели названиями
function fullned(){
if(ined == 0)bned = " Воскресенье "
else if(ined == 1)bned = " Понедельник";
else if(ined == 2)bned = " Вторник";
else if(ined == 3)bned = " Среда" ;
else if(ined == 4)bned = " Четверг";
else if(ined == 5)bned = " Пятница";
else if(ined == 6)bned = " Суббота";};
//функция замены значения переменной месяца названиями
function fullmonth(){
if(imonth=="11"){
ifullmonth="Декабря"};
if(imonth=="0"){
ifullmonth="Января"};
if(imonth=="1"){
ifullmonth="Февраля"};
if(imonth=="2"){
ifullmonth="Марта"};
if(imonth=="3"){
ifullmonth="Апреля"};
if(imonth=="4"){
ifullmonth="Мая"};
if(imonth=="5"){
ifullmonth="Июня"};
if(imonth=="6"){
ifullmonth="Июля"};
if(imonth=="7"){
ifullmonth="Августа"};
if(imonth=="8"){
ifullmonth="Сентября"};
if(imonth=="9"){
ifullmonth="Октября"};
if(imonth=="10"){
ifullmonth="Ноября"};
};
function fullned(){
if(ined == 0)bned = " Воскресенье "
else if(ined == 1)bned = " Понедельник";
else if(ined == 2)bned = " Вторник";
else if(ined == 3)bned = " Среда" ;
else if(ined == 4)bned = " Четверг";
else if(ined == 5)bned = " Пятница";
else if(ined == 6)bned = " Суббота";};
//функция замены значения переменной месяца названиями
function fullmonth(){
if(imonth=="11"){
ifullmonth="Декабря"};
if(imonth=="0"){
ifullmonth="Января"};
if(imonth=="1"){
ifullmonth="Февраля"};
if(imonth=="2"){
ifullmonth="Марта"};
if(imonth=="3"){
ifullmonth="Апреля"};
if(imonth=="4"){
ifullmonth="Мая"};
if(imonth=="5"){
ifullmonth="Июня"};
if(imonth=="6"){
ifullmonth="Июля"};
if(imonth=="7"){
ifullmonth="Августа"};
if(imonth=="8"){
ifullmonth="Сентября"};
if(imonth=="9"){
ifullmonth="Октября"};
if(imonth=="10"){
ifullmonth="Ноября"};
};
В функции al() нужно написать вместо
document.myform1.textdate.value="Сегодня\n"+iday+" "+imonth+" "+iyear+" года\n"+ined;
такой код
document.myform1.textdate.value="Сегодня\n"+iday+" "+ifullmonth+" "+iyear+" года\n"+bned;
Осталось применить CSS к input (id="texttime") между тегами <head> и </head>
Вот пример:
<style>
#textdate{
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center;} </style>
#textdate{
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center;} </style>
Вот полный текст html документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!--as-iam.narod.ru//-->
<!--Календарь//-->
<!--Стиль для textarea//-->
<style>
#textdate{
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center;}
</style>
<script>
<!--
//функция замены значения переменной дня недели названиями
function fullned(){
if(ined == 0)bned = " Воскресенье "
else if(ined == 1)bned = " Понедельник";
else if(ined == 2)bned = " Вторник";
else if(ined == 3)bned = " Среда" ;
else if(ined == 4)bned = " Четверг";
else if(ined == 5)bned = " Пятница";
else if(ined == 6)bned = " Суббота";};
//функция замены значения переменной месяца названиями
function fullmonth(){
if(imonth=="11"){
ifullmonth="Декабря"};
if(imonth=="0"){
ifullmonth="Января"};
if(imonth=="1"){
ifullmonth="Февраля"};
if(imonth=="2"){
ifullmonth="Марта"};
if(imonth=="3"){
ifullmonth="Апреля"};
if(imonth=="4"){
ifullmonth="Мая"};
if(imonth=="5"){
ifullmonth="Июня"};
if(imonth=="6"){
ifullmonth="Июля"};
if(imonth=="7"){
ifullmonth="Августа"};
if(imonth=="8"){
ifullmonth="Сентября"};
if(imonth=="9"){
ifullmonth="Октября"};
if(imonth=="10"){
ifullmonth="Ноября"};
};
//Функция al(главная)
function al(){
//Получение даты и времени
idate = new Date();
//Разделение времени на года, дни и месяцы
iyear = idate.getFullYear();
iday = idate.getDate();
imonth = idate.getMonth();
ined = idate.getDay();
//вызов функций замены
fullmonth();
fullned();
//вставка значения в textarea (id="textdate")
document.myform1.textdate.value="Сегодня\n"+iday+" "+ifullmonth+" "+iyear+" года\n"+bned;
}
//-->
</script></head>
<body onLoad="al();">
<script>
<!--
var bned;
var idate;
var iyear;
var iday;
var ined;
var imonth;
var ifullmonth;
//-->
</script>
<form name="myform1">
<textarea rows="3" type="text" name="textdate" id="textdate" size="40" readonly></textarea></form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!--as-iam.narod.ru//-->
<!--Календарь//-->
<!--Стиль для textarea//-->
<style>
#textdate{
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center;}
</style>
<script>
<!--
//функция замены значения переменной дня недели названиями
function fullned(){
if(ined == 0)bned = " Воскресенье "
else if(ined == 1)bned = " Понедельник";
else if(ined == 2)bned = " Вторник";
else if(ined == 3)bned = " Среда" ;
else if(ined == 4)bned = " Четверг";
else if(ined == 5)bned = " Пятница";
else if(ined == 6)bned = " Суббота";};
//функция замены значения переменной месяца названиями
function fullmonth(){
if(imonth=="11"){
ifullmonth="Декабря"};
if(imonth=="0"){
ifullmonth="Января"};
if(imonth=="1"){
ifullmonth="Февраля"};
if(imonth=="2"){
ifullmonth="Марта"};
if(imonth=="3"){
ifullmonth="Апреля"};
if(imonth=="4"){
ifullmonth="Мая"};
if(imonth=="5"){
ifullmonth="Июня"};
if(imonth=="6"){
ifullmonth="Июля"};
if(imonth=="7"){
ifullmonth="Августа"};
if(imonth=="8"){
ifullmonth="Сентября"};
if(imonth=="9"){
ifullmonth="Октября"};
if(imonth=="10"){
ifullmonth="Ноября"};
};
//Функция al(главная)
function al(){
//Получение даты и времени
idate = new Date();
//Разделение времени на года, дни и месяцы
iyear = idate.getFullYear();
iday = idate.getDate();
imonth = idate.getMonth();
ined = idate.getDay();
//вызов функций замены
fullmonth();
fullned();
//вставка значения в textarea (id="textdate")
document.myform1.textdate.value="Сегодня\n"+iday+" "+ifullmonth+" "+iyear+" года\n"+bned;
}
//-->
</script></head>
<body onLoad="al();">
<script>
<!--
var bned;
var idate;
var iyear;
var iday;
var ined;
var imonth;
var ifullmonth;
//-->
</script>
<form name="myform1">
<textarea rows="3" type="text" name="textdate" id="textdate" size="40" readonly></textarea></form>
</body>
</html>
Скачать пример