Phiên bản đầy đủ: jsB@nk » Màu nền » Công cụ tạo dải màu
URL: https://www.javascriptbank.com/javascript-color-gradient-maker.html
Với hiệu ứng JavaScript mẫu này, bạn có thể dễ dàng tạo được các dải màu (color gradient) trên trang web của mình. Chỉ cần nhập vào hai giá trị: một là giá trị màu bạn muốn tạo, một cho phương thức tạo.Một hiệu ứng JavaScript khá thú vị và độc đáo để thử; bạn có thể chế biến thêm dựa vào nhu cầu của mình.
Phiên bản đầy đủ: jsB@nk » Màu nền » Công cụ tạo dải màu
URL: https://www.javascriptbank.com/javascript-color-gradient-maker.html
<script type="text/javascript">// Created by: Joseph Myers | http://www.codelib.net/// This script downloaded from www.JavaScriptBank.comfunction colorscale(hexstr, scalefactor) {/* declared variables first, in order; afterwards, undeclared local variables */ var r = scalefactor; var a, i; if (r < 0 || typeof(hexstr) != 'string') return hexstr; hexstr = hexstr.replace(/[^0-9a-f]+/ig, ''); if (hexstr.length == 3) { a = hexstr.split(''); } else if (hexstr.length == 6) { a = hexstr.match(/(\w{2})/g); } else return hexstr; for (i=0; i<a.length; i++) { if (a[i].length == 2) a[i] = parseInt(a[i], 16); else { a[i] = parseInt(a[i], 16); a[i] = a[i]*16 + a[i]; }}var maxColor = parseInt('ff', 16);function relsize(a) { if (a == maxColor) return Infinity; return a/(maxColor-a);}function relsizeinv(y) { if (y == Infinity) return maxColor; return maxColor*y/(1+y);}for (i=0; i<a.length; i++) { a[i] = relsizeinv(relsize(a[i])*r); a[i] = Math.floor(a[i]).toString(16); if (a[i].length == 1) a[i] = '0' + a[i];}return a.join('');}function showrainbow(f) { var colorcell, hex, i, nhex; hex = f.orig.value; hex = hex.replace(/\W/g, ''); nhex = colorscale(hex, f.scalef.value-0); if (nhex != hex) { f.outp.value = nhex; colorcell = document.getElementById('origcolor'); i = document.getElementById('newcolor'); colorcell.style.background = '#' + hex; i.style.background = '#' + nhex; for (i=0; i<256; i++) { colorcell = document.getElementById('colorcell'+i); nhex = colorscale(hex, i/(256-i)); colorcell.style.background = '#' + nhex; colorcell.nhexvalue = nhex; } }}</script><div style="width: 400px;"><form><p>Original color: <input type="text" name="orig" value="339990"><br>Scale factor: <input type="text" name="scalef" value="4"><br><input type="button" value="Output" onclick="showrainbow(this.form)"><input type="text" readonly name="outp" style="border: none;"></p></form><table width="150"><tr><td width="50%" height="50" id="origcolor">Original</td><td width="50%" id="newcolor">New</td></tr></table><table cellpadding="0" cellspacing="0"><tr><script type="text/javascript">for (i=0; i<256; i++)document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');</script></tr></table></div>