Форумы » Программирование »

JS - полезные советы, функции



19339
Dimitry
[b]Палитра цветов как в paint на JS[/b]

Так как скриптов таких никогда не видел, и знаю почему, требуется много процессора для создания такой таблицы! И так, вот такой вот скриптик можно применять для выбора цвета с установкой его в нужное поле!
(работает на всех браузерах)

[quote]<style>
#palette {border:1px black solid; width:128px;}
#palette table {border:0px;}
#palette td { cursor:pointer; width:1px; height:1px; }
#color {width:100%; height:16px; text-align:center;}
</style>

<script>
var fieldname="имя_поля_для_добавления_кода_цвета_при_нажатии";
var r=255; var g=0; var b=0; var n=0;
var s=12;
var h=32;
var hex=new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F');

function tohex(num) {
n1=num/16+""; n1=n1.split("."); n1=n1[0]; n2=num-n1*16;
return hex[n1]+""+hex[n2];
}

function print(r1,g1,b1,k1) {
h1=256/h;
r1=r1-k1*h1; if(r1<0) r1=0; if(r1>255) r1=255;
g1=g1-k1*h1; if(g1<0) g1=0; if(g1>255) g1=255;
b1=b1-k1*h1; if(b1<0) b1=0; if(b1>255) b1=255;
color=tohex(r1)+tohex(g1)+tohex(b1);
document.write("<td style='background-color:"+color+";' onclick='view(\""+color+"\")'></td>");
n++;
}

function view(color) {
obj=document.getElementById('color');
obj.style.backgroundColor="#"+color;
obj.innerHTML="#"+color;
field=document.getElementsByName(fieldname)[0];
if(field) field.innerHTML="#"+color;
}

function printpalette() {
document.write("<div id=palette><table cellspacing=0 cellpadding=0>");
for(k=-h;k<h;k++) {
document.write("<tr>");
m=1*s; while(g>=0 && g<=255) {print(r,g,b,k);g+=m;}g-=m;
m=-1*s; while(r>=0 && r<=255) {print(r,g,b,k);r+=m;}r-=m;
m=1*s; while(b>=0 && b<=255) {print(r,g,b,k);b+=m;}b-=m;
m=-1*s; while(g>=0 && g<=255) {print(r,g,b,k);g+=m;}g-=m;
m=1*s; while(r>=0 && r<=255) {print(r,g,b,k);r+=m;}r-=m;
m=-1*s; while(b>=0 && b<=255) {print(r,g,b,k);b+=m;}b-=m;
document.write("</tr>");
}
document.write("</table><div id=color>выберите цвет</div></div>");
}

printpalette();
</script>[/quote]
[b]2009 copyright by demon[/b]
[img]http://imgs.su/users/1/1237754452.jpg[/img]
6600
admiral
[b]Таблица цветов, состоящая из несколько строк javascript[/b].

Вставляется в любое место на странице где нужно вывести всю таблицу:
[quote]<center>
<script>
color=new Array('00','20','40','60','80','a0','c0','ff');for (i=0;i<8;i++) {
document.write("<table border=0 cellpadding=2>");for (j=0;j<8;j++) {
document.write("<tr>");for (k=0;k<8;k++) {
document.write('<td bgcolor="#'+color[i]+color[j]+color[k]+'">');
document.write('<tt><font color="#'+color[7-i]+color[7-j]+color[7-k]+'"> ');
document.write(color[i]+color[j]+color[k]+' </font></tt></td>'); }
document.write("</tr>"); }document.write("</table><br>");
}
</script>
</center>[/quote]
6600
admiral
[b]Увеличиваем картинку при наведении на неё курсора[/b]

Устанавливаем в необходимое место, наведим мышь на картинку.
[quote]<img width="150" onmouseout="reduction(300)" onmouseover="increase(150)" src="ссылка на картинку" id="inc" alt="" style="border: 0px;" />
<script language="JavaScript">
width=300;
height=150;
function increase(position) {
if (width > position) {
step=20;
position=position+step;
}
else
{
return;
}
inc.width=position;
setTimeout('increase('+position+')',1);
}

function reduction(position) {
if (height < position) {
step=20;
position=position-step;
}
else
{
return;
}
inc.width=position;
setTimeout('reduction('+position+')',1);
}
</script>[/quote]
PS если если необходима картинка ссылкой, тогда добавляем то что выделено синим ниже:
[quote][color=blue]<a target="_blank" href="ссылка">[/color]<img width="150" onmouseout="reduction(300)" onmouseover="increase(150)" src="ссылка на картинку" id="inc" alt="" style="border: 0px;" />[color=blue]</a>[/color][/quote]
6600
admiral
[b]Дата последнего изменения документа[/b]

Ставим в нужное нам место, например перед тегом [b]</body>[/b], в самом низу страницы:
[quote]<script language="JavaScript">
<!--
LastDate = new Date(document.lastModified);
LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год
LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));
document.write ("Дата последнего изменения: ", LastDay, "/", LastMonth+1, "/", LastYear);
//-->
</script>[/quote]
2970
Foggy
Подскажите какую-нибудь библиотечку, [b]не целый UI[/b], для создания двусторонних более-менее кроссбраузерных range-инпутов.
1410
tonik
Ребята подскажите, как сделать выплывающее окно не подвижным при скролле:

<script>
$(function() {
$( "#vote" ).dialog({
hide: 'slide',
draggable: 'false',
position: ['left','bottom'],
show: 'slide',
width: 300,});
});
</script>

<div id="vote" title="Опрос">
{vote}
</div>

[color=red]fixedPosition: 'false'[/color] - не помогло...

И если не сложно.
Как сделать что бы данное окно не выплывало у проголосовавших? (но это не обязательно)

Неавторизованные и новички не могут отправлять сообщения.

© 2008-2020
Контакты | Группа | Privacy и Cookie | Правила