今天做组织机构，要分级别显示颜色，自己计算半天也没算出颜色渐变的方法，出来总是花里胡哨的难看的不要不要的，所以查了一下，找到一个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. Moon River

    读书笔记系列链接地址http://www.cnblogs.com/shoufengwei/p/5714661.html.        昨晚无意中听到了一首英文歌曲,虽不知其意,但是瞬间就被优美的旋律 ...

  2. 动态单链表的传统存储方式和10种常见操作-C语言实现

    顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...

  3. 学习ng2，从zonejs开始（非官方翻译） ----angular2系列（一)

    Zone是什么: 官方解释:zone.js为JavaScript提供了执行上下文,可以在异步任务之间进行持久性传递. 最开始我一直没理解到这句话,学习过程中我也因为自己的一些失误而一直纠结徘徊,情况是 ...

  4. Sybase 数据库bcp out备份重要表数据

    bcp相当于逻辑备份,bcp out导出的文件,bcp in可以导回去. 环境:RHEL 5.5 + Sybase客户端软件 需求:在客户端(Linux)备份服务端(HP-UX)重要配置表数据 1.b ...

  5. td中绝对定位div的垂直居中问题

    一.需求 典型的注册页面设计一般是一个三列多行的表格,左列为表单项label,中列为文本框,右列为填写说明和验证提示.如下图 因为整个表单的视觉重心在左中两列,所以在考虑表单整体相对页面水平居中和注册 ...

  6. SQL常用数据库结构升级语句

    修改视图 --SQL Server 2005 GO IF EXISTS (SELECT * FROM sys.views WHERE object_id = OBJECT_ID(N'[dbo].[e_ ...

  7. Elasticsearch——Search的基本介绍

    Elasticsearch最常用的方法莫过于查询了.Es支持以URI请求参数或者请求体的方式进行查询. 查询范例 Elasticsearch支持对多索引以及多类型进行查询. 比如,下面对某个特定索引的 ...

  8. CSS3点点滴滴

    css查遗补漏 标签(空格分隔): css 如果值为若干单词,则要给值加引号.p {font-family: "sans serif";} body的字体有继承兼容性问题,通常这么 ...

  9. JavaScript客户端MVC 框架综述

    简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...

  10. Python语言特性之1：函数参数传递

    问题:在Python文档中好像没有明确指出一个函数参数传递的是值传递还是引用传递.如下面的代码中"原始值"是不放生变化的: class PassByReference: def _ ...