今天做组织机构，要分级别显示颜色，自己计算半天也没算出颜色渐变的方法，出来总是花里胡哨的难看的不要不要的，所以查了一下，找到一个js代码，试了试，很完美哦！

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script src="js/jquery-1.11.3.js"></script>

<script src="js/swiper-3.3.1.jquery.min.js"></script>

<script type="text/javascript">

    /*

     // startColor：开始颜色hex

     // endColor：结束颜色hex

     // step:几个阶级（几步）

     */

    function gradientColor(startColor,endColor,step){

        startRGB = this.colorRgb(startColor);//转换为rgb数组模式

        startR = startRGB[0];

        startG = startRGB[1];

        startB = startRGB[2];

        endRGB = this.colorRgb(endColor);

        endR = endRGB[0];

        endG = endRGB[1];

        endB = endRGB[2];

        sR = (endR-startR)/step;//总差值

        sG = (endG-startG)/step;

        sB = (endB-startB)/step;

        var colorArr = [];

        for(var i=0;i<step;i++){

            //计算每一步的hex值

            var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');

            colorArr.push(hex);

        }

        return colorArr;

    }

    // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)

    gradientColor.prototype.colorRgb = function(sColor){

        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

        var sColor = sColor.toLowerCase();

        if(sColor && reg.test(sColor)){

            if(sColor.length === 4){

                var sColorNew = "#";

                for(var i=1; i<4; i+=1){

                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));

                }

                sColor = sColorNew;

            }

            //处理六位的颜色值

            var sColorChange = [];

            for(var i=1; i<7; i+=2){

                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));

            }

            return sColorChange;

        }else{

            return sColor;

        }

    };

    // 将rgb表示方式转换为hex表示方式

    gradientColor.prototype.colorHex = function(rgb){

        var _this = rgb;

        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

        if(/^(rgb|RGB)/.test(_this)){

            var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");

            var strHex = "#";

            for(var i=0; i<aColor.length; i++){

                var hex = Number(aColor[i]).toString(16);

                hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位

                if(hex === "0"){

                    hex += hex;

                }

                strHex += hex;

            }

            if(strHex.length !== 7){

                strHex = _this;

            }

            return strHex;

        }else if(reg.test(_this)){

            var aNum = _this.replace(/#/,"").split("");

            if(aNum.length === 6){

                return _this;

            }else if(aNum.length === 3){

                var numHex = "#";

                for(var i=0; i<aNum.length; i+=1){

                    numHex += (aNum[i]+aNum[i]);

                }

                return numHex;

            }

        }else{

            return _this;

        }

    }

    var gradient = new gradientColor('#e82400','#8ae800',10);

    console.log(gradient);//控制台输出

    alert(gradient);

    for(var i=0;i<gradient.length;i++){

        var htmls='<div class="mmm'+i+'">'+i+'</div>';

        $("body").append(htmls);

        console.log($("mmm"+i));

        console.log(gradient[i]);

        $(".mmm"+i).css("background-color",gradient[i]);

    }

</script>

</body>

</html>

再附上一个颜色代码对应表http://www.360doc.com/content/13/1120/12/14695328_330723062.shtml

颜色渐变的JS代码的更多相关文章

  1. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  2. WPF 背景颜色渐变的滑动条实现

    原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...

  3. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  4. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  5. IOS导航栏颜色渐变与常用属性

    (转:http://www.cnblogs.com/Lingchen-start/archive/2015/10/23/4904361.html) 今年很忙,忙的写日志的时间都很少.  少的可怜. 自 ...

  6. js代码大全

    超级实用且不花哨的js代码大全 事件源对象event.srcElement.tagNameevent.srcElement.type 捕获释放event.srcElement.setCapture() ...

  7. android Button 切换背景，实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  8. JS代码大全 （都是网上看到 自己整理的）

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...

  9. 超级实用且不花哨的js代码大全

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...

随机推荐

  1. cglib源码分析--转

    原文地址:http://www.iteye.com/topic/799827 背景 前段时间在工作中,包括一些代码阅读过程中,spring aop经常性的会看到cglib中的相关内容,包括BeanCo ...

  2. VS2013正则表达式应用示例

    VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...

  3. web接口测试之GET与POST请求

    关于HTTP协议,我考虑了一下觉得没必要再花一节内容来介绍,因为网上关于HTTP协议的介绍非常详细.本着以尽量避免介绍一空洞了概念与理论来介绍接口测试,我这里仍然会给出具体实例. 在此之前先简单的介绍 ...

  4. Mysql在高并发情况下，防止库存超卖而小于0的解决方案

    背景: 本人上次做申领campaign的PHP后台时,因为项目上线后某些时段同时申领的人过多,导致一些专柜的存货为负数(<0),还好并发量不是特别大,只存在于小部分专柜而且一般都是-1的状况,没 ...

  5. 【Java基础】RTTI与反射之Java

    一.引言 很多时候我们的程序可能需要在运行时识别对象和类的信息,比如多态就是基于运行时环境进行动态判断实际引用的对象.在运行时识别对象和类的信息主要有两种方式:1.RTTI,具体是Class对象,它假 ...

  6. Windows Azure Virtual Network (5) 设置Azure Virtual Machine固定Private IP

    <Windows Azure Platform 系列文章目录> 注意:本文介绍的是Global Azure (http://www.windowsazure.com),如果你使用的是由世纪 ...

  7. laravel中的错误与日志

    日志 laravel中的日志是基于monolog而封装的.laravel在它上面做了几个事情: 把monolog中的addInfo等函数简化成为了info这样的函数 增加了useFiles和useDa ...

  8. CSS魔法堂：你真的懂text-align吗？

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  9. .NET Core扩展IServiceCollection自动注册服务

    前言 在ASP.NET Core中使用依赖注入中使用很简单,只需在Startup类的ConfigureServices()方法中,通过IServiceCollection接口进行注入即可,其它的无需关 ...

  10. Maven提高篇系列之（四）——使用Profile

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...