今天做组织机构，要分级别显示颜色，自己计算半天也没算出颜色渐变的方法，出来总是花里胡哨的难看的不要不要的，所以查了一下，找到一个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. Android基于mAppWidget实现手绘地图（十二）–显示当前用户位置

    若显示当前用户位置,你需要执行以下步骤: 1.添加ACCESS_COARSE_LOCATION 和ACCESS_FINE_LOCATION权限在AndroidManifest.xml中 2.用mapW ...

  2. Winform（C#.NET）自动更新组件的使用及部分功能实现

    声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的.   而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...

  3. SQL中利用DMV进行数据库性能分析

    相信朋友对SQL Server性能调优相关的知识或多或少都有一些了解.虽然说现在NOSQL相关的技术非常的火热,但是RMDB(关系型数据库)与NOSQL是并存的,并且适用在各种的项目中.在一般的企业级 ...

  4. Cordova 讲义 1 – 周金根

    讲义下载地址见:   http://www.zhoujingen.cn/blog/7905.html   最后下载链接   移动应用形成了iOS.Android和windows phone三大阵营: ...

  5. Windows Azure Service Bus (3) 队列(Queue) 使用VS2013开发Service Bus Queue

    <Windows Azure Platform 系列文章目录> 在之前的Azure Service Bus中,我们已经介绍了Service Bus 队列(Queue)的基本概念. 在本章中 ...

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

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

  7. Python语言特性之3：@staticmethod和@classmethod

    问题:Python中@staticmethod和@classmethod两种装饰器装饰的函数有什么不同? 原地址:http://stackoverflow.com/questions/136097/w ...

  8. ASP.NET MVC系列:添加视图

    虽然在上一篇文章中我们知道通过控制器可以在浏览器输出HTML页面,但是这不是控制器主要干的事,因为页面上我为还要做很多好看的特效,页面展示的事情当然交给视图来做了:下面我们就来看看如何添加一个视图 添 ...

  9. 实现在Android 进程和线程

    进程和线程 如果某个应用程序组件是第一次被启动,且这时应用程序也没有其他组件在运行,则Android系统会为应用程序创建一个包含单个线程的linux进程.默认情况下,同一个应用程序的所有组件都运行在同 ...

  10. dmesg 的时间戳处理

    dmesg_with_human_timestamps () { $(type -P dmesg) "$@" | perl -w -e 'use strict; my ($upti ...