VROCK.narod.ru - JavaScript
VROCK.narod.ru - JavaScript

3десь собраны наиболее часто используемые небольшие скрипты. Пока что здесь только то, что я откопал с некоторых доков и написал сам. За более сложными скриптами и др. советую посетить сайты: www.citforum.ru, easy-web.narod.ru
А также скачайте ещё эти доки по JavaScript:
1] JavaScriptBook [Размер: 282 Kb Описание: сценарии JavaScript в активных страницах Web, © А.В. Фролов, Г.В. Фролов, 1998.]
2] Kernel_JS_1.5 [Размер: 110 Kb Описание: эта книга является справочником по ядру языка JavaScript версии 1.5 ]

1) Использование объекта Date();
today = new Date();
WeekDays =new Array ('Понедельник','Вторник','Среда','Четверг','Пятница','Суббота','Воскресенье');
Months =new Array ('января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря');
if(today.getDay()==0) {document.writeln ('Воскресенье, '+today.getDate()+' '+Months[today.getMonth()]+', '+today.getFullYear()+' года');}
else {document.writeln (WeekDays[today.getDay()-1]+', '+today.getDate()+' '+Months[today.getMonth()]+', '+today.getFullYear()+' года');}
//Скрипт выводит дату: день, число месяц, год. Результат работы вверху красным шрифтом

2) Изменение фона страницы или переход на другую с помощью <Select>
function bg() { document.body.style.backgroundColor=form_name.select_name.value; }
function url() { document.location.href=form_name.select_name2.value; }

<form name=form_name action='' method=post onsubmit=''>
<input name=f_clock size=8>
<select name="select_name" onClick='bg()' onChange='bg();' style="width:110;height:19;border:1px solid #708090;background:#000000;color:silver;">
<option value="#000000" selected>Default Color
...............................
<option value="Gray"><Font color="Red">Gray
</select>
<select name=select_name2 onchange="url()" style="background:#000000;color:green;font-family:Arial;font-size:9pt;font-weight:bold;width:130;">
<option value="Europe/index.html" onclick="location.href='Europe/index.html'">Europe
...............................
<option value="Megadeth/index.html" onclick="location.href='Megadeth/index.html'">Megadeth
</select>
</form>
//результат работы 2-a списка вначале страницы

3) Открытие страницы в окне фиксированного размера...
function opn() {window.open("http://vrock.narod.ru/","iname","width=800,height=600,top=0,left=100,scrollbars=no")}
// для работы скрипта указываем на ссылке или кнопке(?) [1]<a href='javascript:opn()' или [2]вешаем ф-ию на какое нибудь событие(Event), например: onClick='opn();'

4) Текущее время:
if(today.getHours()<10) {h="0"+today.getHours();} else {h=today.getHours();}
if(today.getMinutes()<10) {m="0"+today.getMinutes();} else {m=today.getMinutes();}
if(today.getSeconds()<10) {s="0"+today.getSeconds();} else {s=today.getSeconds();}
document.writeln(('| '+h+':'+m+':'+s+' |').bold().strike().fontcolor('gray'));
document.writeln(today.toLocaleString().fontcolor('0x708090').link('javascript:location.reload()'));

// в 1-м случае выводится только часы, минуты и секунды; во 2-м же примере с помощью метода toLocaleString() полная инфа о дате, смотрите сами: в зависимости от браузера значение, выводимое toLocaleString() разное!

5) Идущие часы
function clock_form() { day= new Date();
if(day.getHours()<10) {h="0"+day.getHours();} else {h=day.getHours();}
if(day.getMinutes()<10) {m="0"+day.getMinutes();} else {m=day.getMinutes();}
if(day.getSeconds()<10) {s="0"+day.getSeconds();} else {s=day.getSeconds();}
document.forms_name.elements_name.value=h+':'+m+':'+s;
setTimeout("clock_form()",100); }

// как и в прошлом примере мы создаем новый объект Date(), но в этом случае поле ввода(<input>) считывает значение переменной и обновляется... В теге <body> только нужно указать: onLoad='clock_form()'

6) line.substring(0,i);
line=" Here you will find information about Rock-group and not only ... "; i=0;
function m_line() {
if(i++<=line.length) document.forms[0].forum.value=line.substring(0,i);
else { document.forms_name.elements_name.value=" "; i=0; }
setTimeout('m_line()',100); }

// результат скрипта - 'сменяющийся' текст вначале страницы.
вот только чтобы скрипт работал нужно в теле документа вызвать функцию m_line(): <script> m_line(); </script>


7) Дата последней модификации
lastDate = new Date(document.lastModified);
lastDay = lastDate.getDate();
lastMonth = lastDate.getMonth()+1;
lastYear = lastDate.getFullYear();
document.writeln (('Дата последней модификации: '+ lastDay+ "/"+ lastMonth+ "/"+ lastYear).fontcolor('555555'));
// опять же использование объекта Date(), но считываться уже будет дата модификации документа: document.lastModified

8) Сделать страницу стартовой
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.yoursite.com/');return false;">
Сделать стартовой страницей </a>
//работает только в IE начиная с версии 5

9) Добавление странички в 'Избранное'
<a href="#" onClick="window.external.addFavorite('http://www.yoursite.com/', 'Description'); return false;"> Добавить сайт в Избранное </a>
//работает только в IE начиная с версии 4

10) Проверка элементов формы на содержание инфы...
<script>
required = new Array("your_name", "your_message");
required_show = new Array("your name", "your message");

function sendForm () {
var i, j;
for(j=0; j < required.length;j++) {
for (i=0; i < document.forms[0].length;i++) {
if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) {
alert('Please, input ' + required_show[j]);
document.forms[0].elements[i].focus(); return false; }
} }
if (document.forms[0].your_email.value=="") { return true; }
else if(document.forms[0].your_email.value.indexOf('@',0)==-1 || document.forms[0].your_email.value.indexOf('.',0)==-1) {
alert("Неверно введен e-mail!"); document.forms[0].your_email.focus(); return false; }
else { return true; }
return true; }
</script>
also in < form onsubmit="return sendForm();" >

//Пример работы скрипта можно посмотреть в Гостевой книге...

11) Скрипт, недающий напечать отдельные символы...
<form onSubmit="return false;">
В этом поле невозможно напечатать такие знаки: ( !@#$%^&* и т.д.)
<textarea rows=2 cols=20 name=comments onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;"></textarea>
В этом поле нельзя напечатать двойные или одинарные ковычки:
<input type=text name=txtEmail onKeypress="if (event.keyCode==34 || event.keyCode==39) event.returnValue = false;">
В этом поле удастся напечатать только цифры:
<input type=text name=txtPostalCode onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
</form>

12) Оправка формы по ссылке
<script> function sendform() { document.forms[0].submit(); } </script>
<A Href="javascript:sendform();">Send Form</A>
Если в sendform(); вместо submit(); поставить reset(); то это будет эквивалентно кнопке Reset

13) Информация о браузере
function inf() { prompt("Information about browser: ", navigator.appName +" "+ navigator.appVersion); }
// сделайте клик на ссылке для определения вашего браузера

14) Дата существования сайта...
reliz=new Date('November 9, 2003');
now=new Date();
days=Math.floor((now.getTime()-reliz.getTime())/(1000*3600*24));
years=Math.floor(days/365);
months=Math.floor((days-years*365)/31);

dat=Math.round((days-years*365)-months*31);

dat=(dat>0)?"<b>"+dat+" </b>day(s)":"";
months=(months>0)?"<b>"+months+" </b>month(s) ":"";
years=(years>0)?"<b>"+years+" </b>year(s) ":"";
document.writeln(("Site exists already "+years+months+dat).fontcolor('gray'));
// скрипт задает отсчет от 9 ноября 2003 => задавайте нужную дату, примените форматирование текста при выводе и юзайте!

15) Календарь
setCal();
function getTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
now = null;
var ampm = "" ;

function leapYear(year) {
if (year % 4==0)
return true
return false
}
function getDays(month, year) {
var ar = new Array(12)
ar[0] = 31
ar[1] = (leapYear(year)) ? 29 : 28
ar[2] = 31
ar[3] = 30
ar[4] = 31
ar[5] = 30
ar[6] = 31
ar[7] = 31
ar[8] = 30
ar[9] = 31
ar[10] = 30
ar[11] = 31
return ar[month]
}
function getMonthName(month) {
var ar = new Array('January','February','March','April','May','June','July','August','September','October','November','December')
return ar[month]
}
function setCal() {
var now = new Date()
var year = now.getFullYear()
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null;
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null;
var days = getDays(month, year)
drawCal(firstDay + 0, days, date, monthName, 0 + year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
var headerHeight = 15;
var cellspacing = 2;
var colWidth = 10;
var dayCellHeight = 15;
var dayColor = "darkblue";
var cellHeight = 10;
var todayColor = "red";
var timeColor = "gray";
var text = "";
text+='<TABLE style="font-family:Verdana,Arial;font-size:10pt;color:#000000;font-weight:lighter;"><TR>'
text+='<TD bgcolor=gray style="border:double #000000;background-image:URL(vrock_menu.jpg);" COLSPAN=7 HEIGHT=' + headerHeight + ' align=center>'
text+='<FONT color=white style="font-size:10pt;">'
text+='<B>'+monthName + ' ' + year +'</B>';
text+='</FONT></TD>'
var openCol = '<TD style="border:1px solid #000000;" WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'
var weekDay = new Array('Mon','Tue','Wed','Thu','  Fri','Sat','Sun');
text += '<TR ALIGN="center">'
for (dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>'
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>'
curCell++
} else {
if (digit == date) {
text += '<TD style="border:1px solid #000000;background:#f1f1f1;" HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += '<B>'+digit+'</B>';
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD style="border:1px solid #000000;" HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
text += '</TABLE>'
document.writeln(text);
}

//лучше этот скрипт запихнуть в отдельный файл: fname.js и просто вызвать его где надо <script src="fname.js"></script>

16) Текст, летящий за курсором...

<body bgcolor=black onLoad=go()>
<style>.text { font-family:Arial;font-size:12pt;font-weight:bold;
position:absolute;left:500;color:gray; } </style>
<script>
var x, y, step=13, mess="Good News";
mess=mess.split('');

xpos=ypos=new Array();
for (i=0;i<=mess.length;i++) { xpos[i]=-30; }

var ypos=new Array();
for (i=0;i<=mess.length;i++) { ypos[i]=-30; }

function mouse(){ x=event.x; y=event.y; }

function go() {
for (i=mess.length;i>=1;i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step; ypos[0]=y;

for (i=0;i<mess.length;i++) {
thisspan = eval('span'+i+'.style');
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i]; }
timer=setTimeout(go,10);
}

for (i=0;i<=mess.length-1;i++) {
document.write("<span id='span"+i+"' class='text'>");
document.write(mess[i]+"</span>");
}
document.onmousemove=mouse;
</script>

//текст следует за курсором... работу скрипта можно проверить просто вставив этот код в страницу с *.html `:)

17) Script, определяющий время нахождения на странице

<Script>
o_date=new Date();
o_time=Math.round(o_date.getTime()/1000);

function show_time() {
n_date=new Date();
n_time=Math.round(n_date.getTime()/1000);
sc=Math.floor(n_time-o_time);
if(sc<10) sc="0"+sc;
if(sc<60) mn="00";
if(sc>59) {
mn=Math.floor(sc/60);
sc-=mn*60;
if(sc<10) sc="0"+sc;
if(mn<10) mn="0"+mn;
}
timer=mn+":"+sc;
text.innerHTML=" You are found on page "+timer;
tm=setTimeout(show_time,1000);
}
document.body.onload=show_time;

</Script>
<center id=text></center>


17) Изменение цвета фона

<script>
function changeColor(hexNumber) {
document.bgColor=hexNumber; }
</script>
Change background color
<form method="post" name="background">
<INPUT TYPE="text" name=value>  
<input type=button value="enter a hex value" onClick="changeColor(this.form.value.value)">
</form>

// вводите в окно инпут'а цвет в виде HEX и опаньки! `;)=

18) Мигающая рамка таблицы

<Body leftMargin=2 topMargin=2><br><br><br><br><br><br><br>
<Table width=50% height=50% align=center border=0 id="tab" style="border:double #000000"><tr>
<td><Font Face="Tahoma" style="font-size:10pt;" color="#708090">
<Center>Мигающая рамка таблицы!</Font><br></td></tr></table>
<script>
function flashit() {
if (tab.style.borderColor=="red") tab.style.borderColor="black";
else if(tab.style.borderColor=="black") tab.style.borderColor="#DDDDDD";
else if(tab.style.borderColor=="#DDDDDD") tab.style.borderColor="#708090";
else if (tab.style.borderColor=="#708090") tab.style.borderColor="#123499";
else if (tab.style.borderColor="#123499") tab.style.borderColor="red";
}
setInterval(flashit, 400);
</script>

//надеюсь сам принцип вами понят...так что можно будет регулировать цвет мигания и кол-во цветов...

19) Движение объекта

<script>
var coef_px=-1,coef_py=1,p_move=5;
function startmove() {
dynamic.style.left=300;
dynamic.style.top=0;
setInterval(move,20); }

function move() {
px=parseInt(dynamic.style.left);
px+=coef_px*p_move;
dynamic.style.left=px;
if(px<=parseInt(document.body.offsetWidth)/3-200 || px>=parseInt(document.body.offsetWidth)/3+200) coef_px=-coef_px;

py=parseInt(dynamic.style.top);
py+=coef_py*p_move;
dynamic.style.top=py;
if(py<=0 | py>=300) coef_py=-coef_py;
} </script>
<Body LeftMargin=0 TopMargin=0 bgcolor=black onload=startmove()>
<!--картинка находится в контейнере div...) -->
<div id="dynamic" style="position:absolute;width:;background:gray;">
<Img Src="image.gif" Border="0" alt='Картинка'></div>

//подставьте вместо image.gif адрес своей картинки...скорость движения меняет параметр p_move...use it!8)

20) Random Status Message
//В строке статуса (для IE) на рэндаме будет писатся сообщение из массива. Количество сообщений динамическое.

<Script>
stmsg=[];
stmsg[0]="FOR THOSE ABOUT TO ROCK WE SALUTE YOU!!!";
stmsg[1]="Добро пожаловать в рок-энциклопедию зарубежной музыки";
stmsg[2]="Welcome All ROCKERS OF PLANET! bla.. bla... bla...";
stmsg[3]="We Will Rock You!!!";

dec=10/(stmsg.length-1);
status=stmsg[Math.round((Math.random()*10)/dec)];
c=0, tit=status;

function wrtit() {
status = tit.substring(0,c);
if(c==tit.length) {
c= 0;
setTimeout(wrtit,1000)
}
else {
setTimeout(wrtit,50)
c++;
}
}
wrtit();
</Script>



†±+ Hint: По мере появления новых скриптов страничка будет обновлятся +±†


Реклама: