PDA

View Full Version : سوال: طیفی از رنگ(فوری)



student91
سه شنبه 12 اردیبهشت 1391, 12:22 عصر
سلام



من می خوام یک جدول طراحی کنم که رنگ ستون ها از ستون اول تا آخر،برحسب یک طیف رنگی تغییر کنه!
مثلا ستون اول آبی باشه،بعدی کمرنگ تر و می خوام ستون آخر این طیف قرمز بشه!
لطفا کمکم کنید.ممنون.
ستون های جدولم به صورت پویا ساخته میشه،ولی نمی دونم چطوری براشون رنگ به این سبک بدم!

djsaeedkhan
سه شنبه 12 اردیبهشت 1391, 12:47 عصر
سلام
این نمونه رو ببینید.


<?php
echo "<table border=0>";
for($i=0;$i<15;$i++)
{
echo "<tr backcolor='#12345{$i}' height=10px><td></td></tr>";
}
echo "</table>";
?>

MMSHFE
سه شنبه 12 اردیبهشت 1391, 15:00 عصر
البته فکر کنم درستش اینطوری باشه:


echo '<table border="0px">';
for($i = 0; $i <= 15; $i++) {
echo '<tr bgcolor="#12345'.dechex($i).'" height="10px"><td>&nbsp;</td></tr>';
}
echo '</table>';

Farshid007
سه شنبه 12 اردیبهشت 1391, 15:29 عصر
اگه Color picker می خواهی از این ها استفاده کن
کد کامل یک صفحه HTML:


<html>
<script LANGUAGE="JavaScript">
<!-- Begin
addary = new Array(); //red
addary[0] = new Array(0,1,0); //red green
addary[1] = new Array(-1,0,0); //green
addary[2] = new Array(0,0,1); //green blue
addary[3] = new Array(0,-1,0); //blue
addary[4] = new Array(1,0,0); //red blue
addary[5] = new Array(0,0,-1); //red
addary[6] = new Array(255,1,1);
clrary = new Array(360);
for(i = 0; i < 6; i++)
for(j = 0; j < 60; j++) {
clrary[60 * i + j] = new Array(3);
for(k = 0; k < 3; k++) {
clrary[60 * i + j][k] = addary[6][k];
addary[6][k] += (addary[i][k] * 4);
}
}
hexary = new Array("#666666", "#555555", "#545657");
picary = new Array("picka", "pickb", "pickc", "pickd", "picke", "pickf", "pickg");
initary = new Array("#444444", "#777777", "#aaaaaa", "#bbbbbb", "#cccccc", "#dddddd", "#eeeeee");
pickindex = 0;

function capture() {
hoverColor();
initColor();
if(document.layers) {
layobj = document.layers['wheel'];
layobj.document.captureEvents(Event.MOUSEMOVE);
layobj.document.onmousemove = mouseMoved;
}
else if (document.all) {
layobj = document.all["wheel"];
layobj.onmousemove = mouseMoved;
}
else if (document.getElementById) {
window.document.getElementById("wheel").onmousemove = mouseMoved;
}
}

function mouseMoved(e) {
if (document.layers) {
x = 4 * e.layerX;
y = 4 * e.layerY;
}
else if (document.all) {
x = 4 * event.offsetX;
y = 4 * event.offsetY;
}
else if (document.getElementById) {
x = 4 * (e.pageX - document.getElementById("wheel").offsetLeft);
y = 4 * (e.pageY - document.getElementById("wheel").offsetTop);
}
sx = x - 512;
sy = y - 512;
qx = (sx < 0)?0:1;
qy = (sy < 0)?0:1;
q = 2 * qy + qx;
quad = new Array(-180,360,180,0);
xa = Math.abs(sx);
ya = Math.abs(sy);
d = ya * 45 / xa;
if(ya > xa) d = 90 - (xa * 45 / ya);
deg = Math.floor(Math.abs(quad[q] - d));
n = 0;
sx = Math.abs(x - 512);
sy = Math.abs(y - 512);
r = Math.sqrt((sx * sx) + (sy * sy));
if(x == 512 & y == 512) {c = "000000";}
else {
for(i = 0; i < 3; i++) {
r2 = clrary[deg][i] * r / 256;
if(r > 256) r2 += Math.floor(r - 256);
if(r2 > 255) r2 = 255;
n = 256 * n + Math.floor(r2);
}
c = n.toString(16);
while(c.length < 6) c = "0" + c;
}
hexary[1] = "#" + c.charAt(0) + c.charAt(0) + c.charAt(2) + c.charAt(2) + c.charAt(4) + c.charAt(4);
hexary[2] = "#" + c;
hexary[0] = safetyFirst(c);
hoverColor();
return false;
}

function hoverColor() {
if (document.layers) {
document.layers["wheel"].bgColor = hexary[1];
document.layers["demoa"].bgColor = hexary[0];
document.layers["demob"].bgColor = hexary[1];
document.layers["democ"].bgColor = hexary[2];
document.layers["demoa"].document.cccform.ccc.value = hexary[0];
document.layers["demob"].document.aaaform.abc.value = hexary[1];
document.layers["democ"].document.abcform.abc.value = hexary[2];
} else if ( document.all) {
document.all["wheel"].style.backgroundColor = hexary[1];
document.all["demoa"].style.backgroundColor = hexary[0];
document.all["demob"].style.backgroundColor = hexary[1];
document.all["democ"].style.backgroundColor = hexary[2];
document.all["demoa"].document.cccform.ccc.value = hexary[0];
document.all["demob"].document.aaaform.aaa.value = hexary[1];
document.all["democ"].document.abcform.abc.value = hexary[2];
} else if (document.getElementById) {
document.getElementById("wheel").style.backgroundColor = hexary[1];
document.getElementById("demoa").style.backgroundColor = hexary[0];
document.getElementById("demob").style.backgroundColor = hexary[1];
document.getElementById("democ").style.backgroundColor = hexary[2];
document.cccform.ccc.value = hexary[0];
document.aaaform.aaa.value = hexary[1];
document.abcform.abc.value = hexary[2];
}
return false;
}

function pickColor() {
thecontents = "<tt class='wtxt'>" + hexary[1] +"</tt><br><tt class='btxt'>" + hexary[1] +"</tt></div>";
switch (pickindex) {
case 0:
document.getElementById("picka").innerHTML = thecontents;
document.getElementById("picka").style.backgroundColor = hexary[1];
break;
case 1:
document.getElementById("pickb").innerHTML = thecontents;
document.getElementById("pickb").style.backgroundColor = hexary[1];
break;
case 2:
document.getElementById("pickc").innerHTML = thecontents;
document.getElementById("pickc").style.backgroundColor = hexary[1];
break;
case 3:
document.getElementById("pickd").innerHTML = thecontents;
document.getElementById("pickd").style.backgroundColor = hexary[1];
break;
case 4:
document.getElementById("picke").innerHTML = thecontents;
document.getElementById("picke").style.backgroundColor = hexary[1];
break;
case 5:
document.getElementById("pickf").innerHTML = thecontents;
document.getElementById("pickf").style.backgroundColor = hexary[1];
break;
case 6:
document.getElementById("pickg").innerHTML = thecontents;
document.getElementById("pickg").style.backgroundColor = hexary[1];
break;
}
pickindex += 1;
if (pickindex >= picary.length) pickindex = 0;
}

function initColor() {
for (i=0; i<7; i++) {
thecontents = "<tt class='wtxt'>" + initary[i] +"</tt><br><tt class='btxt'>" + initary[i] +"</tt></div>";
switch (i) {
case 0:
document.getElementById("picka").innerHTML = thecontents;
document.getElementById("picka").style.backgroundColor = initary[i];
break;
case 1:
document.getElementById("pickb").innerHTML = thecontents;
document.getElementById("pickb").style.backgroundColor = initary[i];
break;
case 2:
document.getElementById("pickc").innerHTML = thecontents;
document.getElementById("pickc").style.backgroundColor = initary[i];
break;
case 3:
document.getElementById("pickd").innerHTML = thecontents;
document.getElementById("pickd").style.backgroundColor = initary[i];
break;
case 4:
document.getElementById("picke").innerHTML = thecontents;
document.getElementById("picke").style.backgroundColor = initary[i];
break;
case 5:
document.getElementById("pickf").innerHTML = thecontents;
document.getElementById("pickf").style.backgroundColor = initary[i];
break;
case 6:
document.getElementById("pickg").innerHTML = thecontents;
document.getElementById("pickg").style.backgroundColor = initary[i];
break;
}
}
}

function safetyFirst(c) {
cary = new Array(c.charAt(0),c.charAt(2),c.charAt(4));
for (ci = 0; ci < 3; ci++) {
switch (cary[ci]) {
case "1":
cary[ci]="0";
break;
case "2":
cary[ci]="3";
break;
case "4":
cary[ci]="3";
break;
case "5":
cary[ci]="6";
break;
case "7":
cary[ci]="6";
break;
case "8":
cary[ci]="9";
break;
case "a":
cary[ci]="9";
break;
case "b":
cary[ci]="c";
break;
case "d":
cary[ci]="c";
break;
case "e":
cary[ci]="f";
break;
}
}
safecolor = "#" + cary[0]+cary[0] + cary[1]+cary[1] + cary[2]+cary[2];
return safecolor;
}

// End -->
</script>


<style type="text/css">
h1 {position:absolute; visibility:visible; top:30px; left:80px; font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif; font-size: x-large;}
div#wheel {position:absolute; visibility:visible; top:90px; left:80px; width: 256px; height: 256px;}
div#demoa, div#demob, div#democ {position:absolute; visibility:visible; top:360px; width: 85px; height: 150px; text-align: center; padding-top: 15px; padding-bottom: 200px;}
div#demoa {left:80px; margin-right: 0px;}
div#demob {left:165px; margin-left: 0px; margin-right: 0px;}
div#democ {left:250px; margin-left: 0px;}

div#rights {position:absolute; visibility:visible; top:140px; left:375px;}
div#picks {padding-left: 35px; border-left: 1px dotted grey;}
div#picka, div#pickb, div#pickc, div#pickd, div#picke, div#pickf, div#pickg {width: 200px; height: 40px; padding: 10px;}
div#instructs {padding-bottom: 30px; font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif;}
div#notes {padding-top: 30px; font-size: smaller;}

.btxt {color: #000000;}
.wtxt {color: #ffffff;}
</style>
</head>

<body onLoad="capture()">

<h1>Color Picker</h1>

<!-- on the left, the wheel and display -->
<div id="wheel">
<a href="javascript://" onClick="javascript:pickColor(); return false"><img src="colorwheel.png" alt="color wheel" width="256" height="256" border="0"></a></div>

<div id="demoa">
<form name="cccform">
<input type="text" name="ccc" size="9">
</form>
<span class="btxt">web-safe</span><br>
<span class="wtxt">web-safe</span></div>

<div id="demob">
<form name="aaaform">
<input type="text" name="aaa" size="9">
</form>
<span class="btxt">web-smart</span><br>
<span class="wtxt">web-smart</span></div>

<div id="democ">
<form name="abcform">
<input type="text" name="abc" size="9">
</form>
<span class="btxt">unsafe</span><br>
<span class="wtxt">unsafe</span></div>

<!-- on the right, the picks and instructions -->

<div id="rights">
<div id="instructs">

</div>

<div id="picks">
<div id="picka"></div>
<div id="pickb"></div>
<div id="pickc"></div>
<div id="pickd"></div>
<div id="picke"></div>
<div id="pickf"></div>
<div id="pickg"></div>
</div>

</div>
</div>
</body>
</html>