zoukankan      html  css  js  c++  java
  • javascript实战 : 简单的颜色渐变

    HTML

    <div id="color"></div>

    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 class="item" style="background:','"></span>']
    
    arr.forEach(function(item){
      var h = html[0] + item + html[1]
      all += h
    })
    
    console.log(arr)
    
    document.getElementById('color').innerHTML = all

    效果:

    以上。

  • 相关阅读:
    HTML实体符号代码速查表
    在vue中使用css预编辑器
    多个SVG图形集成到一个SVG图形上
    CSS3那些不为人知的高级属性
    如何搭建一个vue项目(完整步骤)
    Vue.js——vue-resource全攻略
    this.$router.push、replace、go的区别
    Vue界面中关于APP端回调方法问题
    Vue、webpack中默认的config.js、index.js 配置详情
    vue mint ui 手册文档
  • 原文地址:https://www.cnblogs.com/foxcharon/p/11244730.html
Copyright © 2011-2022 走看看