javascript實戰

HTML

<p ></p>

CSS

.item{  display:inline-block;  margin:10px;  width:100px;  height:30px;}

JAVSCRIPT

/*  顏色漸變DEMO  目前支持紅色系和藍色系   5個及以下使用預設顏色  5個以上根據最大最小值進行動態計算*/function getItemColors (colorLevel=5, color_string='red') {   function setter (color_string) {    if (!color_string) {        color_string = 'red'    }    if (color_string === 'red') {        red = 244,green = 0, blue = 0;         maxRed = 244 ,maxGreen = 110,maxBlue = 110;     }    if (color_string === 'blue') {        red = 94,green = 48, blue = 183;         maxRed = 134 ,maxGreen = 108,maxBlue = 184;     }  }    var red, green, blue, maxRed, maxGreen, maxBlue  var colors= [];  var base_lavel = 5    setter(color_string)  var level = (function(colorLevel){    return Math.max(colorLevel, base_lavel)  })(colorLevel) ;   var count = level  while(count--) {     colors.push( 'rgb('+red +','+green+','+blue+')');     red += parseInt(maxRed/level);     green += parseInt(maxGreen/level);     blue += parseInt(maxBlue/level);   }   if (colorLevel < base_lavel) {      switch(colorLevel) {       case 0:          return colors       case 1:          return [colors[2]]       case 2:          return [colors[2], colors[3]]       case 3:          return [colors[1], colors[2], colors[3]]       case 4:          return [colors[1], colors[2], colors[3], colors[4]]       case 5:          return colors       default:          return colors      }   } else {     return colors;   }} var arr = getItemColors(5, 'blue')var all = ""var html = ['<span  style="background:','"></span>']arr.forEach(function(item){  var h = html[0] + item + html[1]  all += h})console.log(arr)document.getElementById('color').innerHTML = all

效果:

以上。