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

    因为ASP.NET中Session的存取机制与ASP相同,都是保存在进行中, 一旦进程崩溃,所有Session信息将会丢失,所以我采取了将Session信息保存到SQL Server中,尽管还有其它的 ...

  2. offsetTop、clientTop、scrollTop、offsetTop

    好好看看下面那张图,基本上就没啥问题了! scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop ...

  3. LoRaWAN协议(五)--OTAA入网方式详述

    前言 OTAA(Over-The-Air Activation),是LoRaWAN的一种空中入网方式.当node在上电的时候处于非入网状态时,需要先入网才能和服务器进行通信.其操作就是node发送jo ...

  4. 【Swift学习】Swift编程之旅---ARC（二十）

    Swift使用自动引用计数(ARC)来跟踪并管理应用使用的内存.大部分情况下,这意味着在Swift语言中,内存管理"仍然工作",不需要自己去考虑内存管理的事情.当实例不再被使用时, ...

  5. OpenJudge4980:拯救行动//stl优先队列

    总时间限制:  10000ms 内存限制:  65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...

  6. .NET Core 调用WCF 服务

    .NET Core 和ASP.NET Core 已经可以调用WCF 服务. 环境要求: VS2015 Update 2 +VS2015 Tooling + .NET Core SDK 下载地址: ht ...

  7. iOS 阶段学习第七天笔记（函数、递归）

     iOS学习(C语言)知识点整理笔记 一.函数 1)概念:具有特定功能的代码块的封装 2)函数的定义: 函数类型+函数名(形参列表) 函数类型 函数名(形参类型1  形参名1,形参类型2   形参名2 ...

  8. LeetCode122:Best Time to Buy and Sell Stock II

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  9. 【Java每日一题】20161101

    package Nov2016; import java.util.HashMap; import java.util.Map; public class Ques1101 { public stat ...

  10. Scalaz（2）－ 基础篇：随意多态－typeclass, ad-hoc polymorphism

    scalaz功能基本上由以下三部分组成: 1.新的数据类型,如:Validation, NonEmptyList ... 2.标准scala类型的延伸类型,如:OptionOps, ListOps . ...