Текущее время: Вт дек 12, 2017 8:31 am

Часовой пояс: UTC+02:00




Начать новую тему  Ответить на тему  [ 3 сообщения ] 
Автор Сообщение
 Заголовок сообщения: JavaScript в примерах
СообщениеДобавлено: Пн апр 15, 2013 8:21 am 
Не в сети
Крутой юзер
Аватара пользователя

Зарегистрирован: Сб дек 15, 2007 10:51 pm
Сообщения: 893
Изображение Всем привет.
Предлагаю вашему вниманию простой календарь для сайта, блога или личных целей написанный на языке JavaScript.

Изображение

Календарик легко настраивается под любые цели, цвет, размер и язык. Как видно на картинке - текущий день подсвечивается красным цветом.
Итак, собственно код.
Цитата:
<HTML>
<head>
<TITLE>Календарь.</TITLE>

</head>
<BODY bgcolor=#c0c0c0> // Меняем цвет фона страницы
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
monthnames = new Array(
"Январь", // Вместо названия месяцев по русски, можно использовать любой язык или текст. Все месяцы ниже.
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"); // Вместо названия месяцев по русски, можно использовать любой язык или текст до этой строки.
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white "); // установка ширины бордера и фонового цвета таблицы
document.write("bordercolor=black><font color=black>"); // установка цвета бордера и цвета текста в таблице
document.write("<tr><td colspan=7><center><strong>" // Выравнивание текста и размер текста
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Вс</td>"); // Отсюда и ниже описание дней недели в укороченном виде
document.write("<td align=center>Пн</td>");
document.write("<td align=center>Вт</td>");
document.write("<td align=center>Ср</td>");
document.write("<td align=center>Чт</td>");
document.write("<td align=center>Пт</td>");
document.write("<td align=center>Сб</td>"); // Тут заканчивается описание дней недели, можно поменять на любой другой язык
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
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("<font color='FF0000'><strong>"); //Вместо FF0000 - красного цвета можно задать любой нужный цвет.
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT>
</CENTER>
<!-- END OF SCRIPT -->
<!/SCRIPT>

</body>
</html>

Важно отметить, что коментарии в коде служат для подсказки где можно безопасно менять параметры. Подсказки начинаются с двух "слешей" //. Нет ни какой проблемы не включать их в тело код, мало того, это уменьшит на несколько байт "вес" скрипта. Скрипт можно использовать в любом блоге или теле HTML. Конечно использовать нужно только сам скрипт, начиная со строки <SCRIPT LANGUAGE="JavaScript"> и до строки <!/SCRIPT>. Если вам нужна полноценная страница, тогда используйте весь код включая открывающие теги:
<head>
<TITLE>Календарь.</TITLE>

</head>
<BODY bgcolor=#c0c0c0>

и до закрывающих тегов:

</body>
</html>
[/quote]

Этот скрипт прекрасный пример на котором хорошо учиться и разбираться в механизмах работы JavaScript. Продолжение следует.


Вернуться к началу
 Заголовок сообщения:
СообщениеДобавлено: Чт апр 18, 2013 10:54 am 
Не в сети
Крутой юзер
Аватара пользователя

Зарегистрирован: Сб дек 15, 2007 10:51 pm
Сообщения: 893
Изображение Очень симпотичный календарик.
Очень просто настраивается под любой цвет, формат, фонт, размер...

Изображение

Цитата:
<html>
<head>
<title>Календарь</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
<!--//
calendar = new Date();
day = calendar.getDay();
document.write("<table width=100 border=1><tr><td><center><font size=2>") // Определяем размер таблицы и размер фонта
if (day == 0) {
document.write("<font color=#ff0000>Воскресенье</font>") // Определяем цвет фонта и тут же можно задать тип фонта
}
if (day == 1) {
document.write("Понедельник")
}
if (day == 2) {
document.write("Вторник")
}
if (day == 3) {
document.write("Среда")
}
if (day == 4) {
document.write("Четверг")
}
if (day == 5) {
document.write("Пятница")
}
if (day == 6) {
document.write("<font color=#ff0000>Суббота</font>") //Так-же можно указать другой цвет
}
document.write("</font></center></td></tr><tr><td><center><font size=2>") // Определяем размер таблицы и размер фонта
month = calendar.getMonth();
if (month == 0 ) {
document.write("Январь")
}
if (month == 1) {
document.write("Февраль")
}
if (month == 2) {
document.write("Март")
}
if (month == 3) {
document.write("Апрель")
}
if (month == 4) {
document.write("Май")
}
if (month == 5) {
document.write("Июнь")
}
if (month == 6) {
document.write("Июль")
}
if (month == 7) {
document.write("Август")
}
if (month == 8 ) {
document.write("Сентябрь")
}
if (month == 9) {
document.write("Октябрь")
}
if (month == 10) {
document.write("Ноябрь")
}
if (month == 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) {
document.write(year)
}
document.write("</font></center></td></tr></table>")
//-->
</script>
</body>
</html>



Последний раз редактировалось _ACID_ Чт апр 18, 2013 2:39 pm, всего редактировалось 1 раз.

Вернуться к началу
 Заголовок сообщения:
СообщениеДобавлено: Чт апр 18, 2013 2:29 pm 
Не в сети
Крутой юзер
Аватара пользователя

Зарегистрирован: Сб дек 15, 2007 10:51 pm
Сообщения: 893
Изображение Очень интересный и простой скрипт создающий спецэффект бегущей радуги по тексту.

Изображение

Цитата:
<html>
<head>
<title>Радужный текст</title>

<script language="JavaScript" type="text/javascript">
// <![CDATA[
var speed = 100; // Меняем скорость измененя цвета speed colours change, 1 second = 1000
var raincol = new Array("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099"); // можете использовать свои цвета
var alink = ""; // поместите сюда вашу ссылку (set to ="" for no link) /****************************
* Rainbow Text Effect *
*(c) 2003-5 mf2fm web-design*
* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/


var rainbow, raintxt, raincnt = 0;

window.onload = function()
{
if (document.getElementById)
{
var i, raini;
rainbow = document.getElementById("rainbow");
raintxt = rainbow.firstChild.nodeValue;
while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
for (i = 0; i < raintxt.length; i++)
{
raini = document.createElement("span");
raini.setAttribute("id", "rain"+i);
raini.appendChild(document.createTextNode(raintxt.charAt(i)));
if (alink)
{
raini.style.cursor="pointer";
raini.onclick=function()
{ top.location.href = alink; }
}
rainbow.appendChild(raini);
}
rainbow = setInterval ("raining()", speed);
}
} // конец функции

function raining()
{
for (var i = 0; i < raintxt.length; i++) document.getElementById("rain"+i).style.color = raincol[(i + raincnt) % raincol.length];
raincnt++;
}

// ]]>
</script>

</head>

<body>

<span id="rainbow">Радужный текст</span>

</body>
</html>


Скрипт с сайта mysite.e-stile.ru.
Оставил скрипт без изменений, как он был.
Зелёным цветом в коде оригинала выделены места в которых автор скрипта оставлял свои коментарии.
Переменную var speed = 100 меняем для изменения скорости изменения цета. Изменению подлежит только аргумент - 100. Например, вместо 100, напишите 300 и посмотрите что будет.
Переменная var raincol = new Array создаёт массив из различных цветов - ("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099") которые вы вольны менять, добавлять и / или уберать, главное - сохраняйте формат в котором вы указываете цвет. Как и ранее - меняем только аргумент !!! Аргумент в данном случае у нас цвета - #99ff00 ; #ff0099.... и т.д.
Переменная var alink = ""; превратит ваш текст в линк. Ссылку вписывать между ковычками "". Это делать не обязательно и работает это как опция.
Переменные var rainbow, raintxt, raincnt = 0; используются скриптом.
Далее идёт сам скрипт и разбирать как всё работает мы тут не будем - придётся слишком много писать а у меня сейчас для этого нет желания.
Обращаю ваше внимание на следующую строку идущую сразу за тегом <body>

<span id="rainbow">Радужный текст</span>

пометил я красным весь код не случаено, это сделано для акцента на нём. Каждый раз, когда в теле странице (после тега <body>) вы поместите эту выделенную строку а вместо слов "Радужный текст" напишите что-то другое, например - "Вася Пупкин", то написанный текст начнёт переливаться всеми цветами радуги. Это к тому, что НЕ НУЖНО каждый раз, когда вы хотите в любом месте вашей странице привлечь внимание "радужным текстом" описывать весь скрипт ! Достаточно поместить только одну строку - <span id="rainbow">ТУТ ЛЮБОЙ ТЕКСТ</span>, тем самым мы будем вызывать всю функцию каждый раз, когда напишем явный вызов функции <span id="rainbow">. После того, как мы закрываем вызов функции </span>, текст после закрывающего тега, будет отформатирован глобальными тегами или тегами по месту.

Продолжение следует. Ну в общем как-то так... :roll:


Вернуться к началу
Показать сообщения за:  Поле сортировки  
Начать новую тему  Ответить на тему  [ 3 сообщения ] 

Часовой пояс: UTC+02:00


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 4 гостя


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
Создано на основе phpBB® Forum Software © phpBB Limited
Русская поддержка phpBB