Примеры JavaScript скриптов
Чтобы использовать примеры, скачайте и используйте один из редакторов.
<head>
<title>Clock full</title>
</head>
<script language=”JavaScript”>
function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString();
setTimeout(‘fulltime()’,500)
}
</script>
<body bgcolor=ffffff text=ff0000>
<center>
<form name=clock>
<input type=text size=17 name=full>
</form>
<script language=”JavaScript”>
fulltime();
</script>
</center>
</body>
</html>
<head>
<title>Бегущая строка</title>
</head>
<script language=”JavaScript”>
var line=”Центр Информационных Технологий “;
var speed=150;
var i=0;
function m_line() {
if(i++<line.length) {
document.cit.forum.value=line.substring(0,i);
}
else{
document.cit.forum.value=” “;
i=0;
}
setTimeout(‘m_line()’,speed);
}
</script>
<body bgcolor=000000>
<center>
<form name=cit>
<input type=text size=32 name=forum>
</form>
</center>
<script language=”JavaScript”>
m_line();
</script>
</body>
</html>
<head>
<title>bgcolor</title>
</head>
<body text=000000 bgcolor=ffffff>
<table border=0 align=center>
<tr><td><form>
<input type=button value=”красный” onClick=”document.bgColor=’ff0000′”>
<input type=button value=”желтый” onClick=”document.bgColor=’ffff00′”>
<input type=button value=”синий” onClick=”document.bgColor=’0000ff'”>
<input type=button value=”голубой” onClick=”document.bgColor=’87ceeb'”>
<input type=button value=”коралловый” onClick=”document.bgColor=’ff7f50′”>
</form></td>
</table>
</body>
</html>
<HEAD>
<TITLE>Упорядоченные и неупорядоченные списки</TITLE>
</HEAD>
<BODY BGCOLOR=”navy” text=”yellow”>
<H3><U>Неупорядоченный список</H3></U>
<UL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</UL>
<HR color=”lime”>
<H3><U>Упорядоченный нумерованный список</H3></U>
<OL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</OL>
</BODY>
</HTML>
<SCRIPT LANGUAGE=”JavaScript”>
current_date = new Date();
document.write(“<i>Врем\я:</i> ” + current_date.getHours() +
“.” + current_date.getMinutes() + “.” + current_date.getSeconds() + “.”);
</SCRIPT>
<head>
<script language=”JavaScript”>
i=0
function d_rand() {
for(j=0;j<10;j++) {
for(i=0;i<10;i++) document.images[j+i*10].src = “white.jpg”
y= Math.floor(Math.random()*10)
for(i=9;i>9-y;i–) document.images[j+i*10].src = “blue.jpg”
}
}
</script>
<body bgcolor=ffffff>
<center>
<table border=0>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<td><img src=”white.jpg” width=20 height=10></td>
<tr><td colspan=10><img src=”blue.jpg” width=250 height=2></td></tr>
</table>
<form name=diagram>
<input name=random type=button value=click onClick=”d_rand()”>
</form>
</center>
</body>
</html>
<HEAD>
<TITLE>Формы</TITLE></HEAD>
<BASE>
<BODY bgcolor=”silver”>
<FORM>
<CENTER><FONT size=6>Элементы диалога</font></center>
<HR color=”blue”>
<Н2>Элемент ISINDEX</h2>
<ISINDEX prompt=”Cтpoкa для ввода критерия поиска”>
<HR color=”blue”>
<Н2>Элементы INPUT</h2>
<H3> Ввод текстовой строки </h3>
<INPUT type=”text” size=50>
<H3> Ввод пароля </h3>
<INPUT type=”password”>
<H3> Флажки </h3>
<INPUT type=”checkbox” name=”F001″ checked>
<INPUT type=”checkbox” name=”F001″ checked>
<H3> Переключатели </h3>
<INPUT type=”radio” name=”S001″ vаluе=”Первый”>
<INPUT type=”radio” name=”S001″ value=”Второй”>
<INPUT type=”radio” name=”S001″ value=”Третий” checked>
<H3> Кнопка подтверждения ввода </h3>
<INPUT type=”submit” value=”Подтверждение”>
<H3> Кнопка с изображением </h3>
<INPUT type=”image” src=”lycos.gif”>
<H3> Кнопка очистки формы </h3>
<INPUT type=”reset” value=”0чистка”>
<H3> Файл </h3>
<INPUT type=”file” name=”photo” accept=”image/*”>
<HR color=”blue”>
<Н2>Элемент SELECT
<SELECT multiple>
<OPTION value=а>Первый
<OPTION value=Ь>Второй
<OPTION value=с>Третий
<OPTION value=d>Четвертый
</select></h2>
<HR color=”blue”>
<Н2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h2>
<HR color=”blue”>
</FORM>
</BODY>
</HTML>
var username = GetCookie(‘username’);
if (username == null) {
username = prompt(‘ Пожалуйста, введите Ваше им\я\n (в противном случае нажмите cancel)’,””);
if (username == null) {
alert(‘Ну хорошо, тогда я буду звать Вас ВебСёрфером’);
username = ‘ВебСёрфер’;
} else {
pathname = location.pathname;
myDomain = pathname.substring(0,pathname.lastIndexOf(‘/’)) +’/’;
// Установка параметра expire на год вперед.
var largeExpDate = new Date ();
largeExpDate.setTime(largeExpDate.getTime() + (365 * 24 * 3600 * 1000));
SetCookie(‘username’,username,largeExpDate,myDomain);
}
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (“;”, offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + “=”;
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(” “, i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + “=” + escape (value) +
((expires == null) ? “” : (“; expires=” +
expires.toGMTString())) +
((path == null) ? “” : (“; path=” + path)) +
((domain == null) ? “” : (“; domain=” + domain)) +
((secure == true) ? “; secure” : “”);
}
document.write(‘<p align=center>Здравствуйте, ‘ + username + ‘</p>’);
</script>
window.location.href = “http://www.uchitel-program.ru”
</script>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
</head>
<body>
<script type=”text/javascript”>
var id = setInterval(function(){
// Работа таймера
var idt = document.getElementById(‘timer’);
idt.innerHTML = parseInt(idt.innerHTML) + 1;
// Текст который движется
var txt = document.getElementById(‘txt’);
// Размер квадрата
var ids = document.getElementById(‘id_size’);
var size = parseInt(ids.innerHTML);
// Координаты
var idx = document.getElementById(‘id_x’);
var x = parseInt(idx.innerHTML);
var idy = document.getElementById(‘id_y’);
var y = parseInt(idy.innerHTML);
// Достигнут ли правый нижний угол
var idl = document.getElementById(‘id_lr’);
var lr = parseInt(idl.innerHTML);
if(x >= size && y >= size)
{
// Достигнут правый нижний угол
idl.innerHTML = 1;
lr = 1;
}
// Идем вправо
if(lr == 0)
{
if(x < size)
{
idx.innerHTML = x + 1;
txt.style.paddingLeft = x;
}
// Идем вниз
else if(y < size)
{
idy.innerHTML = y + 1;
txt.style.paddingTop = y;
}
}
else
{
// Идем влево
if(y > 0 && x > 0)
{
idx.innerHTML = x – 1;
txt.style.paddingLeft = x;
}
// Идем вверх
else if(y > 0)
{
idy.innerHTML = y – 1;
txt.style.paddingTop = y;
}
else
{
// Мы достигли начальной точки
// отключаем таймер
clearInterval(id);
}
}
}, 20);
</script>
<div>size = <span id=’id_size’>100</span>,
x = <span id=’id_x’>0</span>,
y = <span id=’id_y’>0</span>,
lr = <span id=’id_lr’>0</span>,
timer = <span id=’timer’>0</span></div>
<div id=’txt’>Заданный текст</div>
</body>
</html>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length) {
c = 0;setTimeout(“writetitle()”, 3000)
} else {
c++;
setTimeout(“writetitle()”, 200)
}
}
writetitle()
</script>
<head>
<title>Скрипт автоматической скрытой отправки данных с формы</title>
<SCRIPT language=JavaScript>
<!– Beginning of JavaScript –
function sendmail() {
if (document.all) {
document.forms[0].submit()
}
}
// –>
</SCRIPT>
</head>
<body onload=”sendmail()”>
<FORM action=”адрес программы”>
<!– Обратите внимание что здесь реально есть смысл ставить только адрес программы. У меня стоит e-mail за ненадобностья данной информации мне. Это должен быть файл спрятаный в структуру <iframe></iframe> (<frame></frame>) с 0 размерами, чтобы не проиходило видимой перезагрузки страницы, или есть еще способ открыть новое окно и в нем загрузить эту страницу, но это будет видно пользователю.–>
<input type=hidden value=”REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT”>
<!–Все поля можно зделать под любую серверную программу, в том числе программы, которые предоставляют разные хостинги в качестве предустановленных скриптов–>
</FORM>
</body>
</html>
<head>
<title>Простая проверка ввода электронного адреса (e-mail), на наличиен “@” и “.” с определенных знаков.</title>
<script language=”JavaScript”>
<!–
function isValidEmailAddress ( str ) {
// проверяет не осталось ли поле пустым
if (str == ” “) {
alert (“Enter an email address in the field, please.”)
return false
}
// проверяет наличи ‘@’
else if ( str. indexOf ( “@” , 4) == -1 ) {
alert(“Error: Вы внесли ” + str + “. Ваш электронный адрес не содержит в себе ‘@’ .” ) ;
return false
}
// проверяет наличие ‘точки’
else if ( str. indexOf ( “.” , 7) == -1 ) {
alert(“Error: Вы внесли ” + str + “. Ваш электронный адрес не содержит в себе ‘.’ .” ) ;
return false
}
return true
}
–></script>
</head>
<body>
E-mail:<form><input type=”text” size=”30″ maxlength=”40″ name=”EmailAddressField” valing=”middle” onChange=”isValidEmailAddress(this.value)”><input type=”submit” value=”Отправить”></form>
</body>
</html>
<head>
<title>Простая проверка наличия данных в избранных полях (проверка производиться перед отправкой формы)</title>
<script language=”JavaScript”>
<!–
required = new Array(“name”, “email”);
required_show = new Array(“Имя”, “E-mail”);
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(‘Пожалуйста, введите ‘ + required_show[j]);
document.forms[0].elements[i].focus();
return false;
}
}
}
return true;
}
–>
</script>
</head>
<body>
<form action=”/cgi-bin/formmail.cgi” onsubmit=”return SendForm();”>
<table><tr>
<td>Имя:* <input type=”text” name=”name” ></td>
<td>E-mail:* <input type=”text” name=”email”></td></tr>
<tr><td>Сообщение:</td><td>Тема: <input type=”text” name=”subject”></td></tr>
<tr><td colspan=”2″><textarea name=”message” rows=”3″ cols=”48″></textarea></td></tr>
<tr><td colspan=”2″><input type=”submit” value=”Отправить”> * – необходимые для заполнения поля</td></tr></table></form>
</body>
</html>
<head>
<title>Проверка нескольких полей формы на запнение (проверка e-mail, url, и простого наличия данных в ворме)</title>
<script language=”JavaScript”>
<!–//hide script form old browsers
function isValidName ( str ) {
if (str == ” “) {
alert (“Введите как мне к Вам обращаться.”)
return false
}
return true
}
// Function: isValidEmailAddress
// Purpose: to check for a valid email address
function isValidEmailAddress ( str ) {
// проверяет неосталось ли поле пустым
if (str == ” “) {
alert (“Введите свой электронный адрес.”)
return false
}
// проверяет наличи ‘@’ с 3 знака
else if ( str. indexOf ( “@” ,3 ) == -1 ) {
alert(“Error: Вы ввели ” + str + “. Вы уверенны, что это ваш электронный адрес.” ) ;
return false
}
// проверяет наличие ‘точки’ с 6 знака
else if ( str. indexOf ( “.” , 6) == -1 ) {
alert(“Error: Вы ввели ” + str + “. Вы уверенны, что это ваш электронный адрес.” ) ;
return false
}
return true
}
function isValidURL ( str ) {
if (str == ” “) {
alert (“Внесите пожалуйста адрес сайта.”)
return false
}
// проверяет наличие ‘http://’ с 0знака
else if ( str. indexOf ( “http://” , 0) == -1 ) {
alert(“Error: Вы внесли ” + str + “. Вы уверенны, что это адрес сайта.” ) ;
return false
}
// проверяет наличие ‘точки’ с 8 знака
else if ( str. indexOf ( “.” , 10) == -1 ) {
alert(“Error: Вы внесли ” + str + “. Вы уверенны, что это адрес сайта.” ) ;
return false
}
return true
}
function isValidTema ( str ) {
if (str == ” “) {
alert (“Внесите пожалуйста тему сообщения.”)
return false
}
return true
}
function isValidNotes ( str ) {
if (str == ” “) {
alert (“Внесите пожалуйста текст сообщения.”)
return false
}
return true
}
–>
</script>
</head>
<body>
<form ENCTYPE=”multipart/form-data” action=”http://narod.yandex.ru/send-poll.xhtml” method=”POST” onSumbit=”return _ checkAll()”>
<table border=”0″><tr>
<td width=”200″><em>Имя:</em><input type=text name=”name” onChange=”isValidName(this.value)” value=” “></td>
<td width=”200″><em>E-mail:</em><input type=text name=”mail” onChange=”isValidEmailAddress(this.value)” value=” “></td>
</tr><tr>
<td><em>URL:</em><input type=”text” name=”url” onChange=”isValidURL(this.value)” value=”http://”></td>
<td><em> Тема:</em><input type=”text” name=”subj” onChange=”isValidTema(this.value)” value=” “></td>
</tr><tr>
<td valign=”top” colSpan=2><em>Сообщение</em><br><textarea rows=”3″ cols=”48″ name=”mess” onChange=”isValidNotes(this.value)” value=” “></textarea></td>
</tr><tr>
<td colSpan=2 align=”center”><input id=”b” type=”reset” value=”Очистить”> <input id=”b” type=”submit” value=”Отправить”></td></tr>
</table></form>
</body>
</html>
<head>
<title>Отправка на емайл сообщения, с указанием темы и отправителя (при участии почтовика).</title>
<script language=”JavaScript” type=”text/javascript”>
<!–// JavaScript1.3. script written by Deto Freeman
function goSend() {
top.location.href=”mailto:[email protected]?subject=Privet Name=” + document.fMem.tMemNm.value + “,Mail=” + document.fMem.tMemMl.value + “,Ad=” + document.fMem.tMemAd.value + “,Comments=” + document.fMem.tMemCm.value + “,ok(075765)”; }
//–>
</script>
</head>
<body>
<table><tr>
<td><form name=fMem>Имя:</td><td><input type=”text” name=”tMemNm”></td>
</tr><tr>
<td>E-mail:</td><td><input type=”text” name=”tMemMl”></td>
</tr><tr>
<td>Адрес:</td><td><input type=”text” name=”tMemAd”></td>
</tr><tr>
<td>Коментарий:</td><td><input type=”text” name=”tMemCm”></td>
</tr><tr>
<td> </td><td><input type=”button” value=” OK ” onClick=”goSend()”></form></td>
</tr></table>
</body>
</html>
<head>
<title>Выделение всего содержимого поля textarea кликом по ссылке.</title>
<SCRIPT>
<!–
function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
//–>
</SCRIPT>
</head>
<body>
<FORM action= method=post>
<A href=”javascript:highlight(0)” onmouseover=”window.status=”;return true”>Выделить все</A><br>
<TEXTAREA cols=45 rows=3 style=”WIDTH:250″ wrap=virtual>
Для того, чтобы выделить содержание формы нажмите Select All</TEXTAREA></FORM>
</body>
</html>
<head>
<title>Копирование содержимого поля textarea кликом по кнопке.</title>
<SCRIPT language=javascript>
function toBuf(name){
if(document.selection.createRange().text!=””){
name.focus();
document.selection.createRange().duplicate().execCommand(“Copy”);
}else{
name.focus();name.createTextRange().execCommand(“Copy”);}}
</SCRIPT>
</head>
<body>
<form name=main>
<textarea id=lat name=lat cols=”40″ rows=”3″>
<a href=”http://studia.scriptic.ru/”>
<img height=”31″ width=”88″ border=”0″ src=”http://studia.scriptic.ru/banner/88/web-disain.gif”></a></textarea><br>
<INPUT title=copy onclick=toBuf(main.lat) type=button value=”Копировать в буфер”>
</form>
</body>
</html>
<head>
<title>Количество введенных знаков в поле формы.</title>
</head>
<body>
<form name=add>
<textarea class=forms name=descr rows=2 cols=25>
</textarea>
<br>
<SCRIPT language=javascript type=”text/javascript”>
<!–//
document.write(“введено знаков: <input type=text name=curtxt size=4 class=forms>”);
//–>
</SCRIPT>
</form>
<SCRIPT language=javascript type=”text/javascript”>
<!–//
function gettxt()
{
document.add.curtxt.value=document.add.descr.value.length;
setTimeout(“gettxt()”,500);
}
gettxt();
//–>
</SCRIPT>
</body>
</html>
<head>
<title>Динамическое добавление поля по желанию пользователя.</title>
<script language=”javascript”>
var items=1;
function AddItem() {
div=document.getElementById(“items”);
button=document.getElementById(“add”);
items++;
newitem=”<strong>Поле ” + items + “: </strong>”;
newitem+=”<input type=\”text\” name=\”item” + items;
newitem+=”\” size=\”45\”><br>”;
newnode=document.createElement(“span”);
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>
</head>
<body>
<form name=”form1″>
<div ID=”items”>
<strong>Поле 1: </strong><input type=”text” name=”item1″ size=”45″><br>
<input type=”button” value=”Добавить поле” onClick=”AddItem();” ID=”add”>
</div>
</form>
</body>
</html>
<head>
<title>Подсказка в строке состояния</title>
<script language=”JavaScript” type=”text/javascript”>
<!– // hide form other browsers
function help(message)
{
self.status = message;
return true;
}
function checkField(field)
{
if (field.value == “”)
help(“Не забудьте заполнить эти поля”);
else
help(“”);
return true;
}
// stop hiding form other browsers –>
</script>
</head>
<body>
<form method=”post”>
Имя: <input type=”text” name=”name” onFocus=”help(‘Ведите свое имя’);” onBlur=”checkField(this);”>
E-mail: <input type=”text” name=”email” onFocus=”help(‘Ведите свой e-mail’);” onBlur=”checkField(this);”></form>
</body>
</html>
<head>
<title>Ссылка меняет цвет при наведении мышки </title>
</head>
<body>
<script LANGUAGE=”JScript”>
<!–
ua=navigator.userAgent;
v=navigator.appVersion.substring(0,1);
if ((ua.lastIndexOf(“MSIE”)!=-1) && (v=’4′)) {
document.onmouseover= highlight;
document.onmouseout= unhighlight;
}
function highlight() {
src = event.toElement;
if (src.tagName == “A”) {
src.oldcol = src.style.color;
src.style.color = “#ffcc00”;
} }
function unhighlight() {
src=event.fromElement;
if (src.tagName == “A”) {
src.style.color = src.oldcol;
}}
–>
</script>
<a target=”_top” href=”../writ.htm”>Надписи</a><br>
</body>
</html>
<head>
<title>Ссылка плавно меняет цвет при наведении курсора.</title>
<script language=”Javascript”>
<!–//
document.onmouseover = domouseover;
document.onmouseout = domouseout;
function domouseover() {
if(document.all){
srcElement = window.event.srcElement;
if (srcElement.className.indexOf(“fade”) > -1) {
var linkName = srcElement.name;
fadein(linkName);
}
}
}
function domouseout() {
if (document.all){
srcElement = window.event.srcElement;
if (srcElement.className.indexOf(“fade”) > -1) {
var linkName = srcElement.name;
fadeout(linkName);
}
}
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]=”a”; hexa[11]=”b”; hexa[12]=”c”;
hexa[13]=”d”; hexa[14]=”e”; hexa[15]=”f”;
function hex(i) {
if (i < 0)
return “00”;
else if (i > 255)
return “ff”;
else
return “” + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = “#”+hr+hg+hb;
}
function fade(sr, sg, sb, er, eg, eb, step, direction, element){
for(var i = 0; i <= step; i++) {
setTimeout(“setbgColor(Math.floor(” +sr+ ” *(( ” +step+ ” – ” +i+ ” )/ ” +step+ ” ) + ” +er+ ” * (” +i+ “/” +step+ “)),Math.floor(” +sg+ ” * (( ” +step+ ” – ” +i+ ” )/ ” +step+ ” ) + ” +eg+ ” * (” +i+ “/” +step+ “)),Math.floor(” +sb+ ” * ((” +step+ “-” +i+ “)/” +step+ “) + ” +eb+ ” * (” +i+ “/” +step+ “)),”+element+”);”,i*step);
}
}
function fadeout(element) {
fade(255,150,0, 255,255,255, 30, 1, element);
}
function fadein(element) {
fade(255,255,255, 255,150,0, 23, 1, element);
}
–>
</script>
</head>
<body>
<a href=”http://studia.scriptic.ru” name=”fading_link_1″ class=”fade”>click here</a>
</body>
</html>
<head>
<title>Смена текста ссылки при наведении курсора</title>
<SCRIPT language=”JavaScript”>
var oldtext
var newtext
var newlink
function shownewtext(thislink,thistext) {
if (document.all) {
newlink=eval(“document.getElementById(‘”+thislink+”‘)”)
newtext=thistext
oldtext=newlink.childNodes[0].nodeValue
newlink.childNodes[0].nodeValue=thistext;
}
}
function showoldtext() {
if (document.all) {
newlink.childNodes[0].nodeValue=oldtext;
}
}
</script>
</head>
<body>
<DIV id=”deletethis” style=”position:absolute; top:10px; left:150px; background-color:Black;”>
<a href=”http://scriptic.ru/index.shtml” target=”_blank” name=”whatasillyname” onMouseOver=”shownewtext(this.name,’Коллекция JavaScript в примерах’)” onMouseOut=”showoldtext()”>Scriptic.ru</a></DIV>
</body>
</html>
<head>
<title>Плавающие ссылки</title>
<STYLE type=”text/css”><!–
.line { color: #333333; font-weight: bold}
–></STYLE>
<SCRIPT language=”JavaScript”>
<!– Beginning of JavaScript –
// ATTENTION: Too many images will slow down the floating effect.
var message=new Array()
message[0]=”http://scriptic.ru”
message[1]=”Lidia”
message[2]=”http://studia.scriptic.ru”
// You may add a link for each message.
// In case you do not want to link a message just add a ‘#’ instead of an URL
var message_link=new Array()
message_link[0]=”http://scriptic.ru”
message_link[1]=”mailto:[email protected]”
message_link[2]=”http://studia.scriptic.ru”
// font-family for each message
var message_font=new Array()
message_font[0]=”Times New Roman, Times, serif”
message_font[1]=”Impact, Arial, sans-serif”
message_font[2]=”Comic Sans MS, Arial, sans-serif”
// font-size for each message
var message_fontsize=new Array()
message_fontsize[0]=28
message_fontsize[1]=25
message_fontsize[2]=30
// font-color for each message
var message_fontcolor=new Array()
message_fontcolor[0]=”red”
message_fontcolor[1]=”olive”
message_fontcolor[2]=”blue”
// font-weight for each message. Choose a value between 1 and 9
var message_fontweight=new Array()
message_fontweight[0]=7
message_fontweight[1]=9
message_fontweight[2]=7
// width for each message (pixels)
var message_width=new Array()
message_width[0]=300
message_width[1]=200
message_width[2]=300
// average speed of the floating images. Higher means faster
var floatingspeed=3
// do not edit the variables below
var tempo=30
var numberofmessages=message.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofmessages;i++) {
stepx[i]=randommaker(floatingspeed)
stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofmessages;i++) {
imgwidth[i]=10
imgheight[i]=10
}
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
for (i=0;i<=numberofmessages;i++) {
i_fadenowmax[i]=randommaker(10)+2
i_fadestrength[i]=randommaker(90)
i_fadestep[i]=1
i_fadenow[i]=0
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
for (i=0;i<=numberofmessages;i++) {
message_fontweight[i]=100*message_fontweight[i]
}
var spancontent=new Array()
for (i=0;i<=numberofmessages;i++) {
spancontent[i]=”<table width=”+message_width[i]+” cellspacing=0><tr><td valign=top>”
spancontent[i]+=”<span style=’position: relative; font-family: “+message_font[i]+”; font-size: “+message_fontsize[i]+”pt; font-weight: “+message_fontweight[i]+”‘>”
spancontent[i]+=”<a href='”+message_link[i]+”‘>”
spancontent[i]+=”<font color=”+message_fontcolor[i]+”>”
spancontent[i]+=message[i]
spancontent[i]+=”</a>”
spancontent[i]+=”</span>”
spancontent[i]+=”</td></tr></table>”
}
function setValues() {
if (document.all) {
marginbottom=document.body.clientHeight-5
marginright=document.body.clientWidth-5
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(“document.all.span”+i)
thisspan.innerHTML=spancontent[i]
var thisspan = eval(“document.all.span”+(i)+”.style”)
thisspan.posLeft=randommaker(marginright)
thisspan.posTop=randommaker(marginbottom)
}
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(“document.all.span”+i)
imgwidth[i]=thisspan.offsetWidth
imgheight[i]=thisspan.offsetHeight
}
checkmovement()
}
}
function randommaker(range) {
rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}
function checkmovement() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisfilter=eval(“span”+i)
i_fadenow[i]++
if (i_fadenow[i]>=i_fadenowmax[i]) {
i_fadenow[i]=0
if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
}
i_fadestrength[i]+=i_fadestep[i]
thisfilter.filters.alpha.opacity=Math.floor(i_fadestrength[i])
}
checkposition()
movepictures()
timer=setTimeout(“checkmovement()”,tempo)
}
}
function movepictures() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisspan=eval(“document.all.span”+(i)+”.style”)
thisspan.posLeft+=stepx[i]
thisspan.posTop+=stepy[i]
}
}
}
function checkposition() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisspan=eval(“document.all.span”+i+”.style”)
if (thisspan.posLeft>marginright-imgwidth[i]) {
thisspan.posLeft-=Math.abs(stepx[i]+1)
stepx[i]=randommaker(floatingspeed)*-1
}
if (thisspan.posLeft<marginleft) {
thisspan.posLeft+=Math.abs(stepx[i])
stepx[i]=randommaker(floatingspeed)
}
if (thisspan.posTop>marginbottom-imgheight[i]) {
thisspan.posTop-=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)*-1
}
if (thisspan.posTop<margintop) {
thisspan.posTop+=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)
}
}
}
}
// – End of JavaScript – –>
</SCRIPT>
</head>
<BODY style=”width:100%;overflow-x:hidden;overflow-y:hidden”>
<SCRIPT>
<!– Beginning of JavaScript –
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
document.write(“<span id=’span”+i+”‘ style=’position: absolute; z-index: 100; filter: alpha(opacity=50)’></span>”)
document.close()
}
window.onload=setValues
}
// – End of JavaScript – –>
</SCRIPT>
</body>
</html>
<head>
<title>Скрипт выдачи случайных ссылок.</title>
<SCRIPT language=”JavaScript”>
<!– This script and many more are available free online at –>
<!– Begin
function go_to(url) {
window.location=url;
}
function rand_link() {
var a;
a = 1+Math.round(Math.random()*4); // a = random number between 1-4
if (a==1) go_to(“http://script.ru/index.shtml”);
if (a==2) go_to(“http://yndex.ru/”);
if (a==3) go_to(“http://rambler.ru/”);
if (a==4) go_to(“http://studia.script.ru/”);
}
// End –>
</SCRIPT>
</head>
<body>
<CENTER>
<FORM NAME=”myForm”>
<INPUT TYPE=”button” NAME=”myButton” VALUE=”Случайная ссылка”
onClick=”rand_link()”>
</FORM>
</CENTER>
</body>
</html>
<head>
<title>Подсчет и выведение всех ссылок страницы</title>
</head>
<body>
<script language=”JavaScript1.2″>
<!–
function extractlinks(){
var links=document.all.tags(“A”)
var total=links.length
var win2=window.open(“”,””,”menubar,scrollbars”)
win2.document.write(“<body><b>Всего ссылок=”+total+”</b><br></body>”)
for (i=0;i<total-1;i++){
win2.document.write(links[i].outerHTML+”<br>”)
}
}
//–>
</script>
<button onClick=”extractlinks()”>Ссылок</button>
</body>
</html>
<head>
<title>Курсор картинкой</title>
<script language=”JavaScript”>
var Netscape=(navigator.appName.indexOf(“Netscape”) != -1);
function Move(e) {
if (!document.getElementById) return;
obj=document.getElementById(“mouse”);
if (Netscape)
event=e;
if (event.pageX) { // Netscape…
xpointer=event.pageX;
ypointer=event.pageY;
}
else if (event.x) { // Internet Explorer…
xpointer=event.x;
ypointer=event.y;
}
obj.style.left=xpointer – 55;
obj.style.top=ypointer – 55;
}
function Setup() {
if (!document.getElementById) return;
if (Netscape)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=Move;
}
</script>
</head>
<body onLoad=”Setup();” style=”cursor:crosshair”>
<div ID=”mouse” style=”position:absolute; left:50; top:50;”>
<img src=”../img/mause.gif” width=”50″ height=”50″ alt=”” border=”0″>
</div>
</body>
</html>
<head>
<title>Глаза следят за курсором.</title>
<SCRIPT language=”JavaScript”>
// Defaults
var jseyesimg=”../img/eyeblue.gif”;
var jseyeimg=”../img/glas.gif”;
var jseyeslink=”http://scriptic.ru”;
// Internal
var jseyeso=null, jseye1=null, jseye2=null;
// Browser detection
// Global variables
var browserversion=0.0;
var browsertype=0; // 0: unknown; 1:MSIE; 2:NN
// Return true if MSIE or NN detected
function browserdetect() {
var agt= navigator.userAgent.toLowerCase();
var appVer= navigator.appVersion.toLowerCase();
browserversion= parseFloat(appVer);
var iePos= appVer.indexOf(‘msie’);
if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(‘;’,iePos)));
var nav6Pos = agt.indexOf(‘netscape6’);
if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
browsertype= (iePos!=-1) ? 1 : (agt.indexOf(‘mozilla’)!=-1) ? 2 : 0;
return(browsertype>0);
}
browserdetect();
// General utils
// Find object by name or id
function jseyesobj(id) {
var i, x;
x= document[id];
if (!x && document.all) x= document.all[id];
for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
if (!x && document.getElementById) x= document.getElementById(id);
return(x);
}
// Move eyes
function jseyesmove(x, y) {
var ex, ey, dx, dy;
if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
dx=x-ex; dy=y-ey;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye1.style.left= r*dx+36.5; jseye1.style.top= r*dy+44;
ex+=56; dx-=56;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye2.style.left= r*dx+92.5; jseye2.style.top= r*dy+44;
}
}
// Main
function jseyes() {
var img;
var x, y, a=false;
if (arguments.length==2) {
x= arguments[0];
y= arguments[1];
a= true;
}
if (browsertype>0 && browserversion>=5) {
img= “<div id=’jseyeslayer’ style=’position:”+
(a ? “absolute; left:”+x+”; top:”+y : “relative”)+
“; z-index:5; width:150; height:150 overflow:hidden’>”+
“<div id=’jseye1′ style=’position:absolute; left:36; top:44; z-index:6; width:21; height:29’>”+
“<img src='”+jseyeimg+”‘ width=21 height=29 onClick=\”location.href='”+jseyeslink+”‘\”>”+
“</div>”+
“<div id=’jseye2’ style=’position:absolute; left:92; top:44; z-index:6; width:21; height:29’>”+
“<img src='”+jseyeimg+”‘ width=21 height=29 onClick=\”location.href='”+jseyeslink+”‘\”>”+
“</div>”+
“<img src='”+jseyesimg+”‘ width=150 height=150 onClick=\”location.href='”+jseyeslink+”‘\”>”+
“</div>”;
document.write(img);
jseyeso=jseyesobj(‘jseyeslayer’);
jseye1=jseyesobj(‘jseye1’);
jseye2=jseyesobj(‘jseye2’);
switch (browsertype) {
case 1:
document.onmousemove=jseyesmousemoveIE;
break;
case 2:
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=jseyesmousemoveNS;
break;
}
}
}
// Mouse move events
function jseyesmousemoveNS(e) {
jseyesmove(e.pageX, e.pageY);
//return(false);
}
function jseyesmousemoveIE() {
jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);
//return(false);
}
</SCRIPT>
</head>
<body>
<SCRIPT>
jseyes();
</SCRIPT>
</body>
</html>
<head>
<title>Музыкальная ссылка</title>
<SCRIPT>
<!–//
function playHome() {
document.all.sound.src = “midi/7.mid”
//Адрес композиции
}
//–>
</SCRIPT>
<BGSOUND id=”sound”>
</head>
<body>
<a href=”http://scriptic.ru/” onmouseover=”playHome()”>Музыкальная ссылка</a>
<!– адрес и текст ссылки –>
</body>
</html>
<head>
<title>Фоновая музыка</title>
<SCRIPT>
<!–//
function playHome() {
document.all.sound.src = “midi/7.mid”
//Адрес композиции
}
//–>
</SCRIPT>
<BGSOUND id=”sound”>
</head>
<body onload=”playHome()”>
</body>
</html>
<head>
<title>Фоновая музыка с случайным выбором композиции(с названием композиции)</title>
</head>
<body>
<SCRIPT>
//<!–
var midi = “”
var txt = “”
var nummidis = 5
// количество мелодий
day = new Date()
seed = day.getTime()
ran = parseInt(((seed – (parseInt(seed/1000,10) * 1000))/10)/100*nummidis
+ 1,10)
if (ran == (1))
{midi=(“herbst.mid”);
txt=(“herbst.mid”)}
if (ran == (2))
{midi=(“baby.mid”);
txt=(“baby.mid”)}
if (ran == (3))
{midi=(“gemeinde.mid”);
txt=(“gemeinde.mid”)}
if (ran == (4))
{midi=(“ost.mid”);
txt=(“ost.mid”)}
if (ran == (5))
{midi=(“shark.mid”);
txt=(“shark.mid”)}
/* чтобы добавить еще мелодий добавьте необходимое количество блоков
if (ran == (номер по списку))
{midi=(“Адрес композиции”);
txt=(“Текст к песне”)}
И незабудьте сменить количество мелодий иначе добавленное никто не услышет
*/
document.write(‘<center><bgsound src=”‘ + midi + ‘” AUTOSTART=true loop=false></bgsound><strong>Эта музыка “<font color=”red”><em>’ + txt + ‘</em></font></font>”</strong></center>’)
/*
Для Netscape – отключено – если надо, уберите тег комментария..
document.write(‘<embed src=”‘ + midi + ‘” AUTOSTART=true HIDDEN=false VOLUME=100 WIDTH=200 Height=55 loop=false></embed><br><strong>Эта музыка “<font color=”red” size=2><em>’ + txt + ‘</em></font>”</strong>’)
*/
//–>
</SCRIPT>
</body>
</html>
<head>
<title>Кнопка, меняющая цвет при наведении курсор</title>
<style type=”text/css”>
.bigChange {color:#006600; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:yellow}
.start {color:yellow; background:#006600; bolder: Lime; }
</STYLE>
</head>
<body>
<SCRIPT LANGUAGE=JAVASCRIPT>
function highlightButton(s) {
if (“INPUT”==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
<FORM NAME=highlight onmouseover=”highlightButton(‘start’)” onmouseout=”highlightButton(”)”>
<input type=”button” value=”Button 1″ style=”border-color: #ffff00;”>
<input type=”button” value=”Button 2″ style=”border-color: #ffff00;”>
</FORM>
</body>
</html>
<head>
<title>Кнопка, меняющая фон при наведении курсора</title>
</head>
<body>
<script>
<!–
function change2(image){
var el=event.srcElement
if (el.tagName==”INPUT”&&el.type==”button”)
event.srcElement.style.backgroundImage=”url”+”(‘”+image+”‘)”
}
function jumpto2(url){
window.location=’../index.shtml’
}
//–>
</script>
<form onMouseover=”change2(‘../img/bg-g.gif’)” onMouseout=”change2(‘../img/bg-b.gif’)”>
<input type=”button” value=” 1 ” class=”initial” onClick=”jumpto2(‘http://scriptic.ru’)” style=”background:url(../img/bg-b.gif);border-color: #000000;”>
<input type=”button” value=” 2 ” class=”initial” onClick=”jumpto2(‘http://scriptic.ru’)” style=”background:url(../img/bg-b.gif);border-color: #000000;”>
<input type=”button” value=” 3 ” class=”initial” onClick=”jumpto2(‘http://scriptic.ru’)” style=”background:url(../img/bg-b.gif);border-color: #000000;”>
</form>
</body>
</html>
<head>
<title>Кнопка, появляющаяся при наведении курсора на ссылку.</title>
<style type=”text/css”>
.lmNormal{ BACKGROUND-COLOR:transparent; BORDER-BOTTOM:medium none; BORDER-LEFT:medium none; BORDER-RIGHT:medium none; BORDER-TOP:medium none; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:4px; PADDING-LEFT:6px; PADDING-TOP:2px}
.lmMouseover{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#006600 solid thin; BORDER-LEFT:#00ff99 solid thin; BORDER-RIGHT:#006600 solid thin; BORDER-TOP:#00ff99 solid thin; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
.lmClick{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#00ff99 solid thin; BORDER-LEFT:#006600 solid thin; BORDER-RIGHT:#00ff99 solid thin; BORDER-TOP:#006600 solid thin; COLOR:#ffffcc; FONT-SIZE:100%; MARGIN-LEFT:1px; MARGIN-BOTTOM:2px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
</style>
</head>
<body>
<div class=lmNormal style=’font-weight:normal; cursor:hand; width:110; height:20′ onClick=location.href=’http://scriptic.ru’ onMouseDown=”this.className=’lmClick'” onMouseUp=”this.className=’lmMouseOver'” onMouseOver=”this.className=’lmMouseOver'” onMouseOut=”this.className=’lmNormal'”><A HREF=”http://scriptic.ru/”>На главную</A></div>
<div class=lmNormal style=’font-weight:normal; cursor:hand; width:110; height:20’onMouseDown=this.className=’lmClick’ onMouseUp=this.className=’lmMouseOver’ onMouseOver=this.className=’lmMouseOver’ onMouseOut=this.className=’lmNormal’ onClick=location.href=’http://scriptic.ru’><A HREF=”http://scriptic.ru/javascript.shtml”>JavaScript</A></div>
</body>
</html>
<head>
<title>Кнопка, появляющаяся при наведении курсора на ссылку.</title>
<style type=”text/css”>
.lmNormal{ BACKGROUND-COLOR:transparent; BORDER-BOTTOM:medium none; BORDER-LEFT:medium none; BORDER-RIGHT:medium none; BORDER-TOP:medium none; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:4px; PADDING-LEFT:6px; PADDING-TOP:2px}
.lmMouseover{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#006600 solid thin; BORDER-LEFT:#00ff99 solid thin; BORDER-RIGHT:#006600 solid thin; BORDER-TOP:#00ff99 solid thin; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
.lmClick{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#00ff99 solid thin; BORDER-LEFT:#006600 solid thin; BORDER-RIGHT:#00ff99 solid thin; BORDER-TOP:#006600 solid thin; COLOR:#ffffcc; FONT-SIZE:100%; MARGIN-LEFT:1px; MARGIN-BOTTOM:2px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
</style>
</head>
<body>
<div class=lmNormal style=’font-weight:normal; cursor:hand; width:110; height:20′ onClick=location.href=’http://scriptic.ru’ onMouseDown=”this.className=’lmClick'” onMouseUp=”this.className=’lmMouseOver'” onMouseOver=”this.className=’lmMouseOver'” onMouseOut=”this.className=’lmNormal'”><A HREF=”http://scriptic.ru/”>На главную</A></div>
<div class=lmNormal style=’font-weight:normal; cursor:hand; width:110; height:20’onMouseDown=this.className=’lmClick’ onMouseUp=this.className=’lmMouseOver’ onMouseOver=this.className=’lmMouseOver’ onMouseOut=this.className=’lmNormal’ onClick=location.href=’http://scriptic.ru’><A HREF=”http://scriptic.ru/javascript.shtml”>JavaScript</A></div>
</body>
</html>
<head>
<title>Кнопка, меняет текст после клика.</title>
</head>
<body>
<FORM>
<input type=”button” value=”Кликни” onclick=”this.value=’Скрипт сработал'”>
</FORM>
</body>
</html>
<head>
<title>Кнопка с текстом постоянно меняющим цвет.</title>
<script>
function h(color)
{
hn = new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A” ,”B”, “C”, “D”, “E”, “F”)
if(color<0){return “00”}
else if(color>255){
return “FF”
}
else {
s = “” + hn[Math.floor(color/16)] + hn[color%16] return s
}
}
function toH(red, green, blue){
return h(red) + h(green) + h(blue)
}
function RGB(red, green, blue){
return toH(red, green, blue)
}
var sR = 5
var sG = 256
var sB = 56
var R = 5
var G = 256
var B = 256
var b = true;
function setButtonColor(r, g, b) {
document.all[“button”].style.color=RGB(r, g, b);
}
function startChanging(){
if(b==true) {
if((R>256)||(G>256)||(B>256)) {
b=false;
}
R+=sR;G+=sG;B+=sB;
}
else {
if((R<0)||(G<0)||(B<0)) {
b=true;
}
R-=sR; G-=sG; B-=sB
}
setButtonColor(R, G, B);
setTimeout(“startChanging()”, 3)
}
</script>
</head>
<body onload=”startChanging()”>
<button style=”background-color:#ffff33; font: 8pt Fixedsys;” id=”button”><p>Кнопка с цветным текстом</p></button>
</body>
</html>