Version compl�te: jsB@nk » Arrière-plan » JavaScript Maker d?grad? de couleur
URL: https://www.javascriptbank.com/javascript-color-gradient-maker.html
Avec cette exemple de code JavaScript, Vous pouvez facilement faire CSS fond d?grad?, d?grad? de couleurs JavaScript sur votre page web Il suffit d'entrer deux valeurs pour ce fonction JavaScript : Un pour la couleur que vous souhaitez faire et celui de la m?thode pour faire gradient.
Version compl�te: jsB@nk » Arrière-plan » JavaScript Maker d?grad? de couleur
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>