»
AnglaisFrançaisVietnamien

Imprimer - JavaScript Maker d?grad? de couleur - JavaScriptBank.com

Version complète: jsB@nk » Arrière-plan » JavaScript Maker d?grad? de couleur
URL: http://www.javascriptbank.com/javascript-color-gradient-maker.html

JavaScript Maker d?grad? de couleur © JavaScriptBank.comAvec 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: http://www.javascriptbank.com/javascript-color-gradient-maker.html



JavaScript
<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>


HTML
<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>