Phiên bản đầy đủ: jsB@nk » Màu nền » Bảng mẫu màu
URL: https://www.javascriptbank.com/color-gradient-test.html
Hiệu ứng tô màu vào các khung với các tỉ lệ màu sắc khác nhau giống như ta đang thực hiện việc tô màu, bạn có thể thay đổi các thông số ban đầu của mã màu hex trong đoạn mã để có thể tạo nhiều mẫu màu mới.
Phiên bản đầy đủ: jsB@nk » Màu nền » Bảng mẫu màu
URL: https://www.javascriptbank.com/color-gradient-test.html
<STYLE>.content TD {COLOR: white}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*//**********************gradient.jsworks with HTML tablesBy The Octarine Mage**********************/// returns an array of RGB color valuesfunction gradientArray(startColor,endColor,steps){function decimalValue(rgb,index){return 16*hex.indexOf(rgb.charAt(index))+hex.indexOf(rgb.charAt(index+1))}var hex="0123456789abcdef"var value=[]var change=[]for(var i=j=0;i<3;i++){j=i*2+1value[i]=decimalValue(startColor,j)change[i]=(decimalValue(endColor,j)-value[i])/(steps-1)}var colors=[]for(i=0;i<steps-1;i++){colors[i]="#"for(j=0;j<3;j++){colors[i]+=hex.charAt(value[j]/16)+hex.charAt(value[j]%16)value[j]+=change[j]}}colors[steps-1]=endColorreturn colors}// applies a gradient color scheme to a tablefunction Gradient(table,startColor,endColor,direction){var mostColumns=0with (table){for(var i=0;i<rows.length;i++)with(rows[i].cells)if(length>mostColumns)mostColumns=lengthswitch(direction){case 0: // checkerboardvar colors=startColorfor(var r=0;r<rows.length;r++){if(r)if(startColor==rows[r-1].cells[0].bgColor)colors=endColorelsecolors=startColorfor(var c=0;c<rows[r].cells.length;c++){rows[r].cells[c].bgColor=colorsif(colors==startColor)colors=endColorelsecolors=startColor}}breakcase 1: // bottom left to top rightvar colors=gradientArray(startColor,endColor,rows.length+mostColumns-1)for(var j=0,r=rows.length-1;r>=0;r--,j++)with(rows[r])for(var i=j,c=0;c<cells.length;c++,i++)cells[c].bgColor=colors[i]breakcase 2: // bottom to topvar colors=gradientArray(startColor,endColor,rows.length)for(var i=0,r=rows.length-1;r>=0;r--,i++)with(rows[r])for(var c=0;c<cells.length;c++)cells[c].bgColor=colors[i]breakcase 3: // bottom right to top leftvar colors=gradientArray(startColor,endColor,rows.length+mostColumns-1)for(var j=0,r=rows.length-1;r>=0;r--,j++)with(rows[r])for(var i=j,c=cells.length-1;c>=0;c--,i++)cells[c].bgColor=colors[i]breakcase 4: // left to rightvar colors=gradientArray(startColor,endColor,mostColumns)for(var r=0;r<rows.length;r++)with(rows[r])for(var i=c=0;c<cells.length;c++,i++)cells[c].bgColor=colors[i]breakcase 5: // whorlif (rows.length>mostColumns)var colors=gradientArray(startColor,endColor,Math.round(rows.length/2+.4))elsevar colors=gradientArray(startColor,endColor,Math.round(mostColumns/2+.4))for(var r1=0,r2=rows.length-1;r1<=r2;r1++,r2--)for(var i=c1=0,c2=rows[r1].cells.length-1;c1<=c2; c1++,c2--){rows[r1].cells[c1].bgColor=rows[r1].cells[c2].bgColor=rows[r2].cells[c1].bgColor=rows[r2].cells[c2].bgColor=colors[i]if ( i<r1) i++}breakcase 6: // right to leftGradient(table,endColor,startColor,4)breakcase 7: // top left to bottom rightGradient(table,endColor,startColor,3)breakcase 8: // top to bottomGradient(table,endColor,startColor,2)breakcase 9: // top right to bottom leftGradient(table,endColor,startColor,1)break}}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE id=tbl1 class=content cellSpacing=0 cellPadding=8 border=1> <TBODY> <TR align=middle> <TD>row 1<BR>cell 1</TD> <TD>row 1<BR>cell 2</TD> <TD>row 1<BR>cell 3</TD> <TD>row 1<BR>cell 4</TD> <TD>row 1<BR>cell 5</TD></TR> <TR align=middle> <TD>row 2<BR>cell 1</TD> <TD>row 2<BR>cell 2</TD> <TD>row 2<BR>cell 2</TD> <TD>row 2<BR>cell 3</TD> <TD>row 2<BR>cell 5</TD></TR> <TR align=middle> <TD>row 3<BR>cell 1</TD> <TD>row 3<BR>cell 2</TD> <TD>row 3<BR>cell 3</TD> <TD>row 3<BR>cell 4</TD> <TD>row 3<BR>cell 5</TD></TR> <TR align=middle> <TD>row 4<BR>cell 1</TD> <TD>row 4<BR>cell 2</TD> <TD>row 4<BR>cell 3</TD> <TD>row 4<BR>cell 4</TD> <TD>row 4<BR>cell 5</TD></TR> <TR align=middle> <TD>row 5<BR>cell 1</TD> <TD>row 5<BR>cell 2</TD> <TD>row 5<BR>cell 3</TD> <TD>row 5<BR>cell 4</TD> <TD>row 5<BR>cell 5</TD></TR></TBODY></TABLE>Select a Table Gradient Option:<BR><A onclick=tbl1.border=0;this.blur() href="#">Remove Border</A> | <A onclick=tbl1.border=1;this.blur() href="#">Add Border</A> | <A onclick=doGradient(0) href="#">(0) Checkerboard</A><BR><A onclick=doGradient(1) href="#">(1) bottom left to top right</A> | <A onclick=doGradient(2) href="#">(2) bottom to top</A><BR><A onclick=doGradient(3) href="#">(3) bottom right to top left</A> | <A onclick=doGradient(4) href="#">(4) left to right</A><BR><A onclick=doGradient(5) href="#">(5) whorl</A> | <A onclick=doGradient(6) href="#">(6) right to left</A><BR><A onclick=doGradient(7) href="#">(7) top left to bottom right</A> | <A onclick=doGradient(8) href="#">(8) top to bottom</A><BR><A onclick=doGradient(9) href="#">(9) top right to bottom left</A><BR>Starting color=<FONT color=red>red</FONT>, Ending color=<FONT color=blue>blue</FONT><SCRIPT>/*************************************************************************The Gradient function was tested in IE4 or better and worked quitewell. If other browsers support the bgColor property of cells and the rowsand cells collections of a table, then it should work on those browsers.The gradientArray function returns an array of RGB color values.This is useful if you just want an array of color values ranging from astarting color to an ending color in so many steps. Color values MUST bein #RRGGBB format. Named color values, such as 'red', are not supported.You may also note the direction values are patterned after thenumeric keypad of your keyboard.**************************************************************************/window.defaultStatus=window.document.titlevar red="#ff0000",blue="#0000ff"var tbl1=window.document.getElementById("tbl1")function doGradient(direction){event.srcElement.blur()Gradient(tbl1,red,blue,direction)}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->