все для вашего сайта - Учимся делать календарики

Все для вашего сайта

П`ятниця, 03.05.2024, 11:37

Вітаю Вас, Гість

Архів записів

Наше опитування

Статистика

Онлайн всього: 1

Гостей: 1

Користувачів: 0

Наша кнопка

Как часто Вы видели на разных сайтах красивые календарики! И Вам хотелось поставить такую красоту на свой сайт. Но... но с ссылкой на "родной" сайт этого календарика. Но теперь эта проблема будет решена: на этой страничке Вы сами сможете сделать свой собственный анимированный календарик с часиками без всяких ссылок и к Вам не будет никаких притензий, потому что... ЭТО ВАША РАБОТА!

1. Пишем скрипт календарика и часиков:

<META
content="MSHTML 6.00.2600.0" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<META http-equiv=Content-Type content="text/html;
charset=windows-1251"><LINK href="css.css" type=text/css
rel=stylesheet></HEAD>
<BODY bgColor=#901749 leftMargin=0 topMargin=0 marginheight="0">
<TABLE cellSpacing=0 cellPadding=2 width=154 background=image.gif
border=0> <TBODY> <TR> <TD vAlign=center align=middle
width="100%"> <DIV style="FILTER:
shadow(color='#302229';strength=5); WIDTH: 100%" align=center>
<SCRIPT language=JavaScript>



document.write("<table border=0 " );
document.write("style='font-size : 11px; color : #FFFFFA; font-weight:
bold; ???•???:???:???A??' cellpadding=1
cellspacing=2>");
document.write("<tr><td align=center
colspan=7><center>" + monthnames[thismonth] + " " + thisyear +
"</center></td></tr>");
document.write("<tr>");
document.write("<td align=center><font
color=#FF1476>D</td>");
document.write("<td align=center><font
color=#FF1476>L</td>");
document.write("<td align=center><font
color=#FF1476>M</td>")
document.write("<td align=center><font
color=#FF1476>M</td>");
document.write("<td align=center><font
color=#FF1476>J</td>");
document.write("<td align=center><font
color=#FF1476>V</td>");
document.write("<td align=center><font
color=#FF1476>S</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td align=center>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td align=center>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count))
{
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<span style='background-color: #3F081E;border: 1px
solid #FF75AE'><font color='#FF75AE'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
</SCRIPT> </DIV></TD></TR> <TR> <TD
vAlign=center align=middle width="100%"> <DIV align=center>
<CENTER> <TABLE style="BORDER-RIGHT: #ff75ae 1px solid;
BORDER-TOP: #ff75ae 1px solid; BORDER-LEFT: #ff75ae 1px solid;
BORDER-BOTTOM: #ff75ae 1px solid" cellSpacing=0 cellPadding=0
bgColor=#3f081e border=0> <TBODY> <TR> <TD
width="100%"><FONT face=Verdana size=1><STRONG>
<SCRIPT>
document.write("<FONT color='#FF75AE' face='verdana'
style='font-size : 11px;'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds function writeclock() {
i_clock++ if (document.all || document.getElementById ||
document.layers) { clockid[i_clock]="clock"+i_clock
document.write("<span id='"+clockid[i_clock]+"'
style='position:relative'>"+thistime+"</span>") }
}
function clockon() { thistime= new Date() hours=thistime.getHours()
minutes=thistime.getMinutes() seconds=thistime.getSeconds() if
(eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10)
{minutes="0"+minutes} if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds if (document.all) { for
(i=0;i<=clockid.length-1;i++) { var thisclock=eval(clockid[i])
thisclock.innerHTML=thistime } } if (document.getElementById) { for
(i=0;i<=clockid.length-1;i++) {
document.getElementById(clockid[i]).innerHTML=thistime } } var
timer=setTimeout("clockon()",1000)
}
window.onload=clockon </SCRIPT>
<SCRIPT>writeclock()</SCRIPT>
</STRONG></FONT></TD></TR></TBODY></TABLE></CENTER></DIV>

   2. Делаем фон:

Для образца, который показан вверху страницы, я использовал заготовки из и-нета. Вы можете придумать свой рисунок или выбрать из предложенных. Также Вы можете изменить цвет шрифта, нужно только немного поэксперементировать. В этом образце использовалось 3 рисунка:
   spacer02.gif - это рамка календарика
   image.gif - это анимированный фон
   spacer.gif - разделитель (не обязателен)

   3. Вставляем календарик-часики:

После того, как Вы сделали календарик на отдельной странице, Вам нужно будет вставить его на страничку своего сайта. Для этого мы будем использовать <IFRAME>. Прописываем код: <IFRAME src="www.site-help.narod.ru/calendarik.html" height=150 width=154 scrolling=no frameborder=0></IFRAME> Где:
www.site-help.narod.ru - это адрес Вашего сайта,
calendarik.html - страничка с готовым календариком,
height=150 width=154 - высота и ширина <iframe>,
а с помощью scrolling=no frameborder=0 мы убираем полосу прокрутки.
Вставляем код в выбранное место на странице...
Вот и всё!