今天做组织机构，要分级别显示颜色，自己计算半天也没算出颜色渐变的方法，出来总是花里胡哨的难看的不要不要的，所以查了一下，找到一个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. PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性

    //php自带函数 getimagesize()$img_info = getimagesize('tomener.jpg'); echo '<pre>'; print_r($img_in ...

  2. MySQL的学习--join和union的用法

    感觉工作之后一直在用框架,数据库的一些基本的东西都忘记了,这次借着这个系列的博客回顾一下旧知识,学一点新知识. 今天就先从join和union开始. join 是两张表做交连后里面条件相同的部分记录产 ...

  3. 批处理：Windows主机通过FTP下载远程Linux主机上文件

    问题:在Windows上怎么写个批处理把多个文件FTP依次下载到本地某个目录. 批处理脚本示例: @echo off title Download db files. Don't close it!! ...

  4. 每日学习总结<一> 2015-8-31

      Java : 抽象类的简单概念和意义: 包名:域名相反.例: com.eric.test; 访问权限: (public/default/private/protected) public: 可以修 ...

  5. Windows Azure Web Site (7) Web Site配置

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们已经部署了Azure WebSite.我们可以在Web Site配置页面进行配置.如下图: 另外,我们还 ...

  6. 【Swift学习】Swift编程之旅（一）

    学习一门新语言最经典的例子就是输出“Hello World!” print("Hello World!") swift就是这样来输出的. 如果你使用过其他语言,那么看上去是非常的熟 ...

  7. ROS 常用命令字典

    版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5761448.html 该博文适合已经具备一定的ROS编程基础的人,快速查看ROS相关 ...

  8. VS2012 JSON、XML自动生成对应的类

    在VS编辑下拉框中,选择选择性粘贴(Paste Special)

  9. 【转】ASP.NET"正在中止线程"错误原因

    最近做的系统中老出现的一些问题不太明白,在使用 Response.End.Response.Redirect 或 Server.Transfer 时出现 ThreadAbortException , ...

  10. 控件使用经验-MVP模式+控件封装

    项目背景 几年前参与了一个面向学校的人事管理软件的开发,基于WinForm平台.今天主要想谈一谈其中关于控件的使用经验.这个项目我们大量使用了第三方控件.由于这个产品的生命周期很长,我们在设计时要考虑 ...