JavaScript - Скрипты

21.06.2011

Простое и прозрачное окно для безфреймовой версии. Будем рассматривать версию под смайлы.
Как только мы нажимаем на кнопку, открывается окно со смайлами. Мы выбираем смайл и окно закрывается, при этом он вписывается в строку сообщения.

Для начала в ваш style.css напишем новые стили и назовём это к примеру fastsmile:

#fastsmile {
position: absolute;
right: 412px;
top: 125px;
border:solid #A8A8A8 1px;
z-index: 10;
width:200px;
height: 100px;
overflow: hidden;
background-color:#FFFFFF;
color:#000000;
text-align:center;
padding:0px;
}

Зелёным задаётся позиция, а именно 412 пикселей сдвиг с правой стороны на лево, сдвиг на 125 сверху вниз.
Фиолетовым задаются размеры окна то есть: 200 пикселей по ширине и 100 по высоте.
Остальные значения не буду описывать, думаю не составит труда разобраться вам самим.

Далее вставляем в документ Чат внутри этот код:

<div id="fastsmile" style='filter:alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;'>
<a href=# onclick="parent.sendto(' *код смайла '); document.getElementById('fastsmile').style.display='none'; return false;"><img src=ссылка на смайл border=0></a>
<a href=# onclick="parent.sendto(' *код смайла '); document.getElementById('fastsmile').style.display='none'; return false;"><img src=ссылка на смайл border=0></a>
<table align=right><tr><td><button type="ok" style="border: 0px #B2B2B2 solid; background-color: #ffffff; font-size: 11px; font-family:Arial;" value="закрыть" onclick="document.getElementById('fastsmile').style.display='none'; return false;">закрыть окно</button></td></tr></table>
</div>

style='filter:alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;' Управляет прозрачностью блока. Вы можете поменять значение или просто убрать стиль.
document.getElementById('fastsmile').style.display='none'; Функция закрывающая блок. Можете убрать её, если хотите что-бы после нажатия на смайл окно не закрывалось.

И наконец ставим саму кнопку в любое удобное для вас место:

<a href="#" onclick="document.getElementById('fastsmile').style.display='block'; return false;" title="Всплывающее окно">Быстрые смайлы</a>

Вот и всё 😀

14.11.2011

Скрипт работает через функ. title="текс"
Можно вставлять "Чат внутри" в самый конец функ.
Моно настраивать цвета текста, фона, обводки.

<script type="text/javascript">
var styles = 'font:12px Tahoma;padding:4px; background:#181c21; border: 1px solid #555555; -moz-border-radius:6px;-webkit-border-radius:6px; border-radius: 6px; color:#ffffff;'; // стили
var opacit = 100; // прозрачность в процентах
var optime = 100; // скорость появления
var tposit = 4; // количество пикселей
IE=/*@cc_on!@*/false;var elems=document.getElementsByTagName("*");for(var i=0;i<elems.length;i++){if(elems[i].title){elems[i].onmouseover=function(e){var k=[];var j=[];var f=[];var h=[];var g=new Date().getTime();j[g]=this.title;this.title="";k[g]=document.createElement("DIV");k[g].innerHTML="<div style='"+styles+"'>"+j[g]+"</div>";k[g].style.cssText="position:absolute;opacity:0;filter:alpha(opacity=0);z-index:9999;";document.body.appendChild(k[g]);k[g].style.top=mouse(e).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(e).x+tposit+"px";document.onmousemove=function(b){k[g].style.top=mouse(b).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(b).x+tposit+"px"};h[g]=setTimeout(function(){fade(k[g],opacit,optime,function(){if(IE){k[g].style.removeAttribute("filter")}})},150);this.onmouseout=window.onunload=function(){clearTimeout(h[g]);document.onmousemove="";this.title=j[g];fade(k[g],0,optime,function(){document.body.removeChild(k[g])})}}}}function mouse(g){var j,f,k,c,h;j=document;h=IE?window.event:g;f=j.documentElement.scrollTop?j.documentElement.scrollLeft+h.clientX:j.body.scrollLeft+h.clientX;k=j.documentElement.scrollTop?j.documentElement.scrollTop+h.clientY:j.body.scrollTop+h.clientY;return{x:f,y:k}}function fade(f,b,a,c){if(IE){d=f.style.filter.replace(/.*opacity=([0-9]*).*/,"$1");if(!d){d=100}d=parseFloat(d)}else{var d=f.style.opacity;if(d==""){d=1}d=parseFloat(d);b=b/100}var e=new Date().getTime();setTimeout(function(){var g=(new Date().getTime())-e;var h=g/a;var j=(b-d)*h+d;if(IE){f.style.filter="alpha(opacity="+j+")"}else{f.style.opacity=j}if(h<1){setTimeout(arguments.callee,10)}else{if(IE){f.style.filter= "alpha(opacity="+b+")"}else{f.style.opacity=b}if(c){c()}}},10)};
</script>
Себе ставил, работает.

30.03.2012

«Динамичный» блок новостей

Для начала создадим на всех нужных страницах сайта блок id="news" со следующим содержимым:
<div id="news">
<script src="news.js" type="text/javascript"></script>
</div>
Далее в корень сайта заливаем файл news.js следующего содержания:
var newsOne = 'Название новости №1';
var newsTwo = 'Название новости №2';
var newsThree = 'Название новости №3';

document.write('<a href="#">'+newsOne+'</a><a href="#">'+newsTwo+'</a><a href="#">'+newsThree+'</a>');
Естественно, вместо # ставим ссылку на саму новость.

Таким образом, если установить блок с новостями на несколько страниц сайта, то его содержимое не нужно будет менять на каждой странице. Достаточно лишь изменить один js файл - и на всех страницах, где установлен этот блок изменится его содержание.

Также, так как каждая новость имеет свою переменную (newsOne, к примеру) ее, если нужно, можно отобразить в любом другом месте сайта:
document.write(newsOne);
Все, что осталось сделать - оформить с помощью CSS блок новостей и все готово. Тут уж дело вашей фантазии.

К ссылкам, кстати, рекомендую использовать параметр display: block;. В противном случае, в файл скрипта добавьте тег <br> после каждой ссылки, чтобы перенести ее на другую строку.

Точно также можно сделать и меню на сайте. Тогда добавление новых пунктов или удаление старых не будет проблемой.

27.09.2012

Задумался о возможности проверки активна ли вкладка с чатом в настоящий момент.
1) Может пригодиться, например, для: выдачи звуковых уведомлений о сообщениях только при неактивной вкладке, как это реализовано в мессенджерах (Skype, ICQ, etc.). Вот такой вот скрипт есть:
//проверка активна ли в настоящий момент вкладка браузера
var isActive = true;
function onBlur() {isActive = false;};
function onFocus() {isActive = true;};
if (/*@cc_on!@*/false) { // для Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
Соответственно, при вставке звука в сообщение проверяем булеву переменную isActive -
if(!isActive) {
//...добавляем звук.
}
2) Еще один вариант использования - останавливать прокрутку при потере фокуса. Отвлёкся человек от чата, остановилась прокрутка, вернулся в окно чата и продолжил читать переписку с места остановки. Правда, с первым же сообщением после возвращения лог прокрутится вниз, но будет визуально видно, как много за это время наговорили. Ну и эффект должен понравиться чатланам 😉 В общем, как-то так примерно:
function wr(text) {
...
if(loaded==1 && isActive) up();
}
Или при потере фокуса ставить в лог какой-то разделитель, как это реализовано, например, в ********** 😉
Что-то вроде

3) Для использующих скрипт сколько фраз написано вам пока вы молчали можно сделать сброс счетчика при получении окном фокуса:
function onFocus() {str_plus(0);};
if (/*@cc_on!@*/false) { // для Internet Explorer
document.onfocusin = onFocus;
} else {
window.onfocus = onFocus;
}
P.S. само собой содержимое функций onBlur и onFocus может содержать все из перечисленных действий одновременно.

03.10.2012

Функция для склонения существительных по падежам. В зависимости от числа-значения вернет вместе с числом считаемое существительное в нужном падеже.
Для того, чтоб страницы не выглядели безграмотными с выражениями "Сегодня чату 21 дня" или "Сейчас в чате 11 человека".
// функция для склонения слов (значение, "(1)день", "(2)дня", "(5)дней")
function plural(n,str1,str2,str5){return n + ' ' + ((((n%10)==1)&&((n%100)!=11))?(str1) 🙁 ((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2) 🙁 str5)))}
Пример использования:



и т.д. мест применения в чате очень много.

12.11.2012

Если кому-то, как и мне, понадобится скролинг окна сообщений и списка пользователей внутри чата на тач-интерфейсах, добавляем в head:
<script>
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
// event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
</script>
а в onload:
touchScroll('leftdiv');
touchScroll('usersdiv');
P.S. взято **********, в комментариях есть доработанные скрипты для скролинга по двум направлениям и плагины для jQuery

26.11.2012

Игра `Крестики нолики` на бесконечном поле на JS

Всем известная игра в крестики нолики 😀
Цель игры - построить непрерывный ряд из 5 крестиков по горизонтали, вертикали или диагонали.


Javascript

<script type="text/javascript">
var TOTLIN, ATFAC, PLAYER, OPPON, IGROK, PROGR, WINLINE, GAMEEND;
var IGT, X, Y, LX, LY, OTMENA=false;
var BOARD, VALUE, LINP, WEIGHT = new Array(0, 0, 4, 20, 100, 500, 0);
function sgn(T) {
if (T<0) T=-1;
else if (T>0) T=1;
else T=0;
return T;
}
function INICIAL() {
var I, J, tr;
var f = '<table id="f" style="border: none; border-collapse:collapse;">';
BOARD = new Array();
VALUE = new Array();
LINP = new Array();
for (I=0;I<=20;I++) {
if (I>0 && I<20) tr='<tr>';
BOARD[i] = new Array();
VALUE[i] = new Array();
LINP[i] = new Array();
for (J=0; J<=20; J++) {
if (I*J>0 && I<20 && J<20) tr += '<td id="c-'+I+'-'+J+'" onclick="ANAKEY(this);" style="font-family: Tahoma, Helvetica, Sans Serif; border: 1px dotted #00a; cursor: pointer; width: 20px; font-weight: bold; text-align: center; vertical-align: middle; font-size: 16px; line-height: 20px">&nbsp;</td>';
VALUE[i][J] = new Array();
LINP[i][J] = new Array();
for(C=1;C<3;C++) { LINP[i][J][C] = new Array(); }
}
if (I>0 && I<20) { tr += '</tr>'; f += tr; }
}
f += '</table>';
document.write(f);
PROGR=0;
IGROK=0;
}
function ANAKEY(a) {
X = a.id.replace(/c-/,'').replace(/-.*/,'');
Y = a.id.replace(/c-/,'').replace(/.*-/,'');
if (BOARD[X][Y] == 0) {
BOARD[X][Y]=1; MOVEXOD();
if (GAMEEND) {
IGROK += 1;
MESSAG('Поздравляем! Вы выиграли!');
}
else {PRGMAK();}
}
}
function NEWGAME() {
var I, J, C, D;
if (OTMENA) {
alert('Игра не закончена!');
return false;
}
for(I=1;I<=19;I++)
for(J=1;J<=19;J++) {
geid('c-'+I+'-'+J).innerHTML='&nbsp;';
geid('c-'+I+'-'+J).className='';
BOARD[i][J]=0;
for(C=1;C<3;C++) {
VALUE[i][J][C] = 0;
for(D=0;D<4;D++) LINP[i][J][C][D] = 0;
}
}
geid('txt').innerHTML='Ваш ход';
geid('prg').innerHTML=PROGR;
geid('igr').innerHTML=IGROK;
PLAYER=1;
OTMENA=true;
TOTLIN=(19*(19-4)+(19-4)*(19-4))*4; LX=1; LY=1;
X=10;
Y=X;
ATFAC=parseInt(IGROK/2);
if (ATFAC >15) ATFAC=15;
for(I=1;I<20;I++)
for(J=1;J<20;J++) {
IGT = BOARD[i][J];
DRAMOV(I,J);
}
}
function DRAMOV(XX, YY) {
var idt;
LX=XX;
LY=YY;
idt='c-'+XX+'-'+YY;
if (IGT == 1) {
geid(idt).innerHTML='x';
}
else if (IGT == 2) {
geid(idt).className='red';
geid(idt).innerHTML='o';
}
}
function MOVEXOD() {
var T, K, L, X1, Y1, X11, Y11, DX, DY, NUM, LIO, LIP, TTT, idt;
WINLINE = 0;
OPPON = 3 - PLAYER;
GAMEEND = false;
idt='c-'+LX+'-'+LY; geid(idt).className='';
for (T=0;T<4;T++)
for(K=0;K<5;K++) {
X1 = parseInt(X) + sgn(T - 2) * K;
Y1 = Y - sgn(T) * K;
switch(T) {
case 0: TTT = X1 > 0 && X1 < 16; break;
case 1: TTT = (X1 > 0 && X1 < 16) && (Y1 > 0 & Y1 < 16); break;
case 2: TTT = Y1 > 0 && Y1 < 16; break;
case 3: TTT = (X1 > 4 && X1 < 20) && (Y1 > 0 && Y1 < 16); break;
default:;
}
if(TTT) {
NUM = LINP[X1][Y1][PLAYER][T];
NUM = NUM + 1;
if (NUM == 1) TOTLIN--;
else if (NUM == 5) GAMEEND = true;
LINP[X1][Y1][PLAYER][T] = NUM;
if (GAMEEND && (WINLINE == 0)) WINLINE = T + 1;
LIP = LINP[X1][Y1][PLAYER][T];
LIO = LINP[X1][Y1][OPPON][T];
for(L=0;L<5;L++) {
X11 = X1 - sgn(T - 2) * L;
Y11 = parseInt(Y1) + sgn(T) * L;
if (LIO == 0) VALUE[X11][Y11][PLAYER]=VALUE[X11][Y11][PLAYER] + WEIGHT[LIP + 1] - WEIGHT[LIP];
else
if (LIP == 1) VALUE[X11][Y11][OPPON] = VALUE[X11][Y11][OPPON] - WEIGHT[LIO + 1];
}
}
}
BOARD[X][Y] = PLAYER;
IGT = PLAYER;
if (GAMEEND) {
switch(WINLINE) {
case 1: DX = 1; DY = 0; break; case 2: DX = 1; DY = 1; break;
case 3: DX = 0; DY = 1; break; case 4: DX = -1; DY = 1; break;
default:;
}
do {
X = (X - 0 + DX);
Y = (Y - 0 + DY);
}
while (BOARD[X][Y] == PLAYER);
X -= DX;
Y -= DY;
for(I=1;I<6;I++) {
idt='c-'+X+'-'+Y; geid(idt).className='green';
DRAMOV (X, Y); X = X - DX; Y = Y - DY;
}
}
else {
DRAMOV (X, Y);
PLAYER = OPPON;
}
}
function PRGMAK() {
var I, J, MAX, VALZ;
if (TOTLIN <= 0) { GAMEEND = true; MESSAG('Tie game!'); }
else {
OPPON = 3 - PLAYER;
MAX = -32767;
X = 10;
Y = 10;
if (BOARD[X][Y] == 0) MAX = 4;
for(I=1;I<20;I++)
for(J=1;J<20;J++) {
if (BOARD[i][J]==0) {
VALZ=parseInt(VALUE[i][J][PLAYER]*(16+ATFAC)/16)+VALUE[i][J][OPPON]+parseInt(Math.random()*4);
if (VALZ>MAX) {
X = I; Y = J;
MAX = VALZ;
}
}
}
MOVEXOD();
if (GAMEEND) {
PROGR++; MESSAG('Компьютер победил!');
}
}
}
function MESSAG(SS) { alert(SS); OTMENA=false; NEWGAME(); }
function geid(i) { return document.getElementById(i); }
</script>

24.01.2013

Стильный ********** "лайкальных" кнопок. По ссылке конструктор для формирования готового кода на сайт.

26.06.2013

Вчера вышел свежий релиз файрфокса, и пришло время обратить внимание на **********.
Думаю, этот способ уведомлений должен понравиться. Можно выводить сообщения в небольшом окошке возле трея, они будут видны даже при свернутом браузере.
Попробовать можно здесь: **********
Поддержка:
- Safari 6
- Chrome 27
- Firefox 22

14.12.2013

BETEPAH, отличная идея) я как-то упустил их обновление) будем пробовать)

Скрипт смена фона плавной радугой, как хочет любой клиент! Не хватает только единорогов...
скрипт ещё 2011 года, но я только сегодня встретил)
**********

14.12.2013

кушает до 20% CPU

16.07.2018

Привет всем.
Может кто подкинуть более менее хороший скрипт вывод и смены случайных фраз?
Т.е. просто рандомный вывод фразы после перезагрузки и их смена через каждые 5-10 сек.
Гуглил, все как-то объемно и не вызывает доверия.

17.07.2018

<script language="JavaScript">

function refresh() {
window.location.reload(); }
setInterval("refresh()", 5000);
var r_fraza = new Array ();
r_fraza[0] = "Случайная фраза.";
r_fraza[1] = "Ещё одна случайная фраза.";
r_fraza[2] = "Третья случайная фраза.";
r_fraza[3] = "Случайная фраза из середины.";
r_fraza[4] = "Следующая случайная фраза.";
r_fraza[5] = "Предпоследняя случайная фраза.";
r_fraza[6] = "Крайняя случайная фраза.";
var i = Math.round(6*Math.random());
document.write(r_fraza[i]);

</script>
5000 миллисекунд = 5 секунд (время обновления фраз)

Фразы добавляем столько, сколько нужно, по аналогии. При этом меняем цифру 6 на новое количество фраз.

17.07.2018

почти то, что надо, но он перезагружает страницу для того, чтобы обновить фразу. Как-то без этого можно?

17.07.2018

В самый конец Body (или сразу после него) вставляем
<script language="JavaScript">
function updateText(divId) {
let r_text = new Array();
r_text[0] = "Случайная фраза.";
r_text[1] = "Ещё одна случайная фраза.";
r_text[2] = "Третья случайная фраза.";
r_text[3] = "Случайная фраза из середины.";
r_text[4] = "Следующая случайная фраза.";
r_text[5] = "Предпоследняя случайная фраза.";
r_text[6] = "Крайняя случайная фраза.";
let i = Math.round(6 * Math.random());
document.getElementById(divId).innerHTML = r_text[i];
}
setInterval("updateText('r_text')", 5000);
updateText('r_text');
</script>
А в нужное место вставляем блок <div id="r_text"></div>