Календарь

ПнВтСрЧтПтСбВс
http://www.kurs.kz/ - Курсы валют в обменных пунктах г. Астана и других городах Казахстана

Блок календаря, часов, погоды, курса валют и текущее время

Код HTML:

<!DOCTYPE html><!--html5-->



<html lang="ru"><!--html для русских-->



<head><!--метаданные страницы-->

<meta charset="utf-8"/><!—популярная кодировка-->

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>



<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--предпочтения браузера-->

<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--начальный масштаб для адаптации страниц-->

<META NAME="AUTHOR" CONTENT="Alexander Kosolapov"><!--автор страницы-->

<title>Календарь</title><!--имя страницы-->

<meta name="description" content="Календарь, часы, погода, текущее время"/><!--для поисковых систем-->



<STYLE TYPE="text/css"><!--для печати-->

<!--

@page { margin: 0.5in }

P { margin-bottom: 0.08in; direction: ltr; widows: 2; orphans: 2 }

A:link { color: #0000ff; so-language: zxx }

-->

</STYLE>



<STYLE TYPE="text/css"><!--стиль страницы-->



#time{/*текщее время*/

border:0px solid red;/*толщина рамки цвет*/

color:white;/*цвет шрифта*/

font:italic bold 100% "Curier new",arial;/*шрифт*/

float:top;/*примыкает к верху*/

position:relative;/*позиционирование варьируется*/

text-shadow:1px 1px 2px rgba(51,204,255,.9),2px 2px 3px rgba(255,255,255,.6);/*тень смещение размытие цвет прозрачность*/

z-index:11;/*11 слой*/

}

.lk{/*блок календаря*/

background-image:url("img/lk2.jpg");/*картинка*/

float:top;/*примыкает к верху*/

max-width:240px;/*длина блока*/

height:450px;/*высота блока*/

position:relative;/*позиционирование варьируется*/

-webkit-box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*тень бокса для хрома*/

-moz-box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*тень бокса для мозилы*/

-o-box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*тень бокса для оперы*/

-ms-box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*тень бокса для експлоера*/

-khtml-box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*тень бокса для сафари*/

box-shadow:0.5px 0.5px 0.5px 1px rgba(204, 204, 204, 0.9), 1px 1px 1px 2px rgba(255, 255, 255, .5);/*свойства тени бокса */

z-index:2;/*слой 2*/

}

.zkl{/*блок заголовка*/

background-image:linear-gradient(top,#09f 0%,#03c 100%);

background-image:-moz-linear-gradient(top,#09f 0%,#03c 100%);/*градиент для мозилы*/

background:-webkit-linear-gradient(top,#09f 0%,#03c 100%);/*градиент сверху вниз для хрома*/

background-image:-o-linear-gradient(top,#09f 0%,#03c 100%);/*градиент для оперы*/

background-image:-ms-linear-gradient(top,#09f 0%,#03c 100%);/*градиент для эксплоера*/

background-image:-khtml-linear-gradient(top,#09f 0%,#03c 100%);/*градиент для сафари*/

width:100%;/*длина блока*/

height:9%;/*высота блока*/

position:absolute;/*позиционирование абсолютное*/

text-align:center;/*текст по центру*/

top:7px;/*расположение от верха*/

z-index:3;/*слой 3*/

}

.pl{/*тонкая полоска*/

background-color:#09f;/*фоновый цвет*/

height:3px;/*высота блока*/

width:100%;/*длина блока*/

position:absolute;/*позиционирование абсолютное*/

top:40px;/*расположение от верха*/

z-index:4;/*слой 4*/

}

.zgl{/*текст названия колонок*/

color:#fff;/*цвет шрифта*/

font:bold 150% "Times New Roman",arial;/*шрифт*/

margin:5px auto;/*внешние отступы*/

text-shadow:1px 1px #ccc,1px 1px #000;/*тень текста*/

z-index:5;/*слой 5*/

}

.str{/*значок стрелка*/

width:15px;/*длина блока*/

height:15px;/*высота блока*/

background-image:url("img/zn.png");/*картинка*/

position:absolute;/*позиционирование абсолютное*/

right:14px;/*расположение справа*/

top:14px;/*расположение от верха*/

z-index:6;/*слой 6*/

}

#kdr{ /*блок календаря*/

border:3px solid #ff3;/*параметры рамки*/

border-radius:9px;/*закругление углов*/

background:rgba(255,255,255,.7);/*фон*/

margin:auto;/*внешние отступы*/

top:3.7em;/*расположение от верха*/

position:relative;/*позиционирование варьируется*/

width:97%;/*длина блока*/

height:42%;/*высота блока*/

z-index:7;/*слой 7*/

}

#calendar4 {/*календарь*/

width:100%;/*длина блока*/

font:monospace,arial;/*свойства шрифта*/

line-height:1.2em;/*межстрочный интервал*/

font-size:1em;/*размер шрифта*/

text-align:center;/*текст по центру*/

}

#calendar4 thead tr:last-child {

font-size:small;/*размер шрифта*/

font-weight:700;/*жирность шрифта*/

color:#666;/*цвет шрифта*/

}

#calendar4 tbody td {/*строки*/

color:#357;/*цвет шрифта*/

}

#calendar4 tbody td:nth-child(1) {

font-size:small;/*размер шрифта*/

color:rgba(102, 102, 102, .7);/*цвет шрифта и прозрачность*/

}

#calendar4 tbody td:nth-child(n+7),

#calendar4 .holiday {

color:#e85;/*цвет шрифта*/

}

#calendar4 tbody td.today {/*строка дней*/

outline:3px solid red;/*свойства контура*/

}

.tm{/*блок часов*/

border:0px solid red;/*параметры рамки*/

margin:15px auto;/*внешние отступы*/

position:absolute;/*позиционирование абсолютное*/

width:100%;/*длина блока*/

height:100%;/*высота блока*/

z-index:10;/*слой 10*/

}

.pa{/*блок погоды в Астане*/

border:0px solid blue;/*толщина рамки цвет*/

bottom:0;/*расположение снизу*/

left:-2px;/*расположение слева*/

position:absolute;/*позиционирование абсолютное*/

width:120px;/*длина блока*/

height:60px;/*высота блока*/

z-index:11;/*слой 11*/

}

.pk{/*блок погоды в караганде*/

border:0px solid blue;/*толщина рамки цвет*/

bottom:0;/*расположение снизу*/

right:0;/*расположение справа*/

position:absolute;/*позиционирование абсолютное*/

width:120px;/*длина блока*/

height:60px;/*высота блока*/

z-index:11;/*слой 11*/

}

.ks{/*курс валют*/

left:252px;/*расположение слева*/

top:26px;/*расположение сверху*/

position:absolute;/*позиционирование варьируется*/

z-index:12;/*слой 12*/

}

</STYLE><!--/стили страницы-->



</head><!--/метаданные страницы-->



<body><!--тело страницы-->



<script type="text/javascript"><!--скрипт текущего времени-->

function clock() {

var d = new Date();

var month_num = d.getMonth()

var day = d.getDate();

var hours = d.getHours();

var minutes = d.getMinutes();

var seconds = d.getSeconds();

month=new Array("января", "февраля", "марта", "апреля", "мая", "июня",

"июля", "августа", "сентября", "октября", "ноября", "декабря");

if (day <= 9) day = "0" + day;

if (hours <= 9) hours = "0" + hours;

if (minutes <= 9) minutes = "0" + minutes;

if (seconds <= 9) seconds = "0" + seconds;

date_time = "Сегодня - " + day + " " + month[month_num] + " " + d.getFullYear() +

" г.&nbsp;Текущее время - "+ hours + ":" + minutes + ":" + seconds;

if (document.layers) {

document.layers.doc_time.document.write(date_time);

document.layers.doc_time.document.close();

}

else document.getElementById("time").innerHTML = date_time;

setTimeout("clock()", 1000);

}

</script>



<span id="time">

</span>



<script type="text/javascript">

clock();

</script><!--/скрипт текушего времени-->



<div class="lk"><!--блок календаря-->



<div class="zkl"><!--заголовок календаря-->



<p class="zgl">Календарь</p><!--текст заголовока календарь-->



<div class="str"><!--стрелка заголовка-->

</div><!--/стрелка заголовка-->



<div class="pl"><!--полоска под синим заголовоком-->

</div><!--/полоска под синим заголовоком-->



</div><!--/заголовок календаря-->



<div id="kdr"><!--контейнер самого календаря-->



<table id="calendar4"><!--таблица календаря-->



<thead><!--верхняя часть таблицы-->



<tr><!--верхняя строчка таблицы-->



<td></td><!--пустая ячейка для красной строки-->



<td colspan="4"><!--ячейка месяцев-->

<select><!--выбор месяцев-->



<option value="0">Январь</option>

<option value="1">Февраль</option>

<option value="2">Март</option>

<option value="3">Апрель</option>

<option value="4">Май</option>

<option value="5">Июнь</option>

<option value="6">Июль</option>

<option value="7">Август</option>

<option value="8">Сентябрь</option>

<option value="9">Октябрь</option>

<option value="10">Ноябрь</option>

<option value="11">Декабрь</option>



</select><!--/выбор месяцев-->

</td><!--/ячейка месяцев-->



<td colspan="3"><!--ячейка года-->

<input type="number" value="" min="0" max="9999" size="4"><!--ввод годов-->

</td><!--/ ячейка года-->



</tr><!--/верхняя строчка в таблице-->



<tr><!--строка дней недели-->

<td></td><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td>

</tr><!--/строка дней недели-->



</thead><!--закрытие верхней части таблицы-->



<tbody><!--тело календаря-->

</tbody><!--/тело календаря-->



</table><!--/таблицы-->



<script><!--скрипт календаря-->

function Calendar4(id, year, month) {

Date.prototype.getWeek = function () {

var target = new Date(this.valueOf());

var dayNr = (this.getDay() + 6) % 7;

target.setDate(target.getDate() - dayNr + 3);

var firstThursday = target.valueOf();

target.setMonth(0, 1);

if (target.getDay() != 4) {

target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);

}

return 1 + Math.ceil((firstThursday - target) / 604800000);

}

var Dlast = new Date(year,parseFloat(month)+1,0).getDate(),

D = new Date(year,month,Dlast),

DNlast = D.getDay(),

DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),

m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),

g = document.querySelector('#'+id+' input');

if (new Date(D.getFullYear(),D.getMonth(),1).getWeek() < 10) {

calendar = '<tr><td>0' + new Date(D.getFullYear(),D.getMonth(),1).getWeek();

}else{

calendar = '<tr><td>' + new Date(D.getFullYear(),D.getMonth(),1).getWeek();

}

if (DNfirst != 0) {

for(var i = 1; i < DNfirst; i++) calendar += '<td>';

}else{

for(var i = 0; i < 6; i++) calendar += '<td>';

}

for(var i = 1; i <= Dlast; i++) {

if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {

calendar += '<td class="today">' + i;

}else{

if (

(i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) ||

(i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) ||

((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) ||

(i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) ||

(i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) ||

(i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) ||

(i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) ||

(i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) ||

(i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) ||

(i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) ||

(i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) ||

(i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004)

){

calendar += '<td class="holiday">' + i;

}else{

calendar += '<td>' + i;

}}

if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0 && i != Dlast) {

if (new Date(D.getFullYear(),D.getMonth(),i).getWeek() < 9) {

calendar += '<tr><td>0' + new Date(D.getFullYear(),D.getMonth(),i+1).getWeek();

}else{

calendar += '<tr><td>' + new Date(D.getFullYear(),D.getMonth(),i+1).getWeek();

}}}

if (DNlast != 0) {

for(var i = DNlast; i < 7; i++) calendar += '<td>';

}

document.querySelector('#'+id+' tbody').innerHTML = calendar;

g.value = D.getFullYear();

m.selected = true;

if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {

document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td><td><td><td><td><td><td>';

}

document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)';

}

Calendar4("calendar4",new Date().getFullYear(),new Date().getMonth());

document.querySelector('#calendar4').onchange = function Kalendar4() {

Calendar4("calendar4",document.querySelector('#calendar4 input').value,document.querySelector('#calendar4 select').options[document.querySelector('#calendar4 select').selectedIndex].value);

}

</script><!--/скрипт календаря-->



<div class="tm"><!--блок часов от яндекс-->

<iframe frameborder="no" scrolling="no" style="border:0; width:280px;height:150px;" src="http://time.yandex.ru/pages/widget/informer/index.html?geoid=163&theme=analog&lang=ru&layout=horiz"></iframe>

</div><!--/часы от яндекс-->



</div><!--/блок календаря-->



<div class="pa"><!--блок погода в Астане-->

<EMBED src="http://rp5.kz/informer/120x60/1/12.swf" loop=false menu=false quality=high scale=noscale wmode=transparent bgcolor=#CCCCCC flashvars="id=9505&lang=ru&um=00000" WIDTH="120" HEIGHT="60" NAME="loader" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE= "http://www.macromedia.com/go/getflashplayer"></EMBED>

</div><!--/блок погода-->



<div class="pk"><!--блок погода Караганда-->

<a href="http://rp5.ru/9552/ru"><img border=0 width=120 height=60 src="http://rp5.ru/informer/120x60x2.php?f=17&id=9552&lang=ru&um=00000"></a>

</div><!--/блок погода 2-->



</div><!--/контейнера календарь-->



<div class="ks"><!--блок курс валют-->

<a href="http://www.kurs2.kz" target="_blank"><img src="http://www.kurs.kz/informers/informer_graph.php?city=216" width="120" height="120" border="1" alt="http://www.kurs.kz/ - Курсы валют в обменных пунктах г. Астана и других городах Казахстана" ></a>

</div><!--/блок курс валют-->



</body><!--/тело страницы-->

</html><!--закрытие html кода-->