原生js生成渐变色数组集合

个人博客：http://www.guoit.com

简化了下背景，给定三个变量，分别为开始colorMAX色，结束色colorMIN，生成颜色个数num，生成一个长度为num的数组（这个数组为开始色到渐变色的数组）。

使用的范围，用户选择色调，生成和这个色调相关的颜色

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><title></title>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script>String.prototype.colorRgb = function(){var sColor = this.toLowerCase();//十六进制颜色值的正则表达式var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;// 如果是16进制颜色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 "RGB(" + sColorChange.join(",") + ")";}return sColor;};/*** 生成渐变色，从绿色到红色的渐变* colorMAX   str 如"rgb(204,189,196)"或者"#bd1717"* colorMIN  str 如"rgb(15,25,89)"或者"#cccccc"* num  number  生成颜色个数*/function ShadeColor(colorMAX,colorMIN,num){var colorMAX=colorMAX.toLowerCase();var colorMIN=colorMIN.toLowerCase();var RegHex = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;if(RegHex.test(colorMAX)&&/^rgb/.test(colorMAX)){colorMAX="rgb(221,221,221)"}else if(RegHex.test(colorMIN)&&/^rgb/.test(colorMIN)){colorMIN="rgb(116,116,116)"}if(RegHex.test(colorMAX)){colorMAX=colorMAX.colorRgb()}if(RegHex.test(colorMIN)){colorMIN=colorMIN.colorRgb()}colorMAX=colorMAX.slice(4,-1).split(",")colorMIN=colorMIN.slice(4,-1).split(",")console.log(colorMIN);var colors= [];//默认的最深颜色var red = colorMAX[0]-0,green = colorMAX[1]-0, blue = colorMAX[2]-0;//最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105var maxRed = colorMIN[0]-0,maxGreen = colorMIN[1]-0,maxBlue = colorMIN[2]-0;var level = num;while(level--) {colors.push( 'rgb('+red +','+green+','+blue+')');red += parseInt(maxRed/num);green += parseInt(maxGreen/num);blue += parseInt(maxBlue/num);}return colors;}//    调用方法var ss=ShadeColor("#bd1717","rgb(204,189,196)",30)console.log(ss);for(var i=0;i<ss.length;i++){$($("li")[i]).css("background",ss[i])}
</script>
</body>
</html>

原生js生成渐变色数组集合相关推荐

js生成随机数/数组（marksheng）
生成范围内随机数 javascript function rand(min,max) {return Math.floor(Math.random()*(max-min))+min; } 生成随机数组 ...
原生JS生成PDF文件、生成pdf功能
js实现生成pdf文件这里我主要做个记录,之前写的现在忘得差不多了,所以直接上代码先来HTML的代码,这里因为我用的HkCms框架所以{hkcms:adv name="tctotal&q ...
原生js遍历 json数组对象
//无规律 <script>var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];for(var i=0,l=json.l ...
原生js生成99乘法表（美化版）
今天使用js制作99乘法表,强迫症的我只能这么做-- 以下是效果图,哎呀妈,变形了,凑活看吧~~~~ 下面就来看看我这49行代码咋写的吧强迫症的人,真是苦逼 <!DOCTYPE html> ...
php多图片上传到数组,input type=file多图片上传原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的代码如下: 这里要给file表单加上一个multiple属性 multiple="multiple& ...
js使用基础总结（简单封装，事件，foreach 原生js写法）
1.forEach的灵活使用 [注意]数组专用的-----遍历函数方法相当于for循环语法结构 arr.forEach(function(obj,index){ obj---数组中的具体数据,可以是 ...
原生JS数组去重的几种方法
有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉,但是原生JS有排序,有筛选等等,但是就是没有数组去重怎么办呢? 这能怎么办,自己手动实现嘛.(以下代码直接在原型上添加的的方法,为的就是和原 ...
js中数据结构数组Array、映射Map、集合Set、对象、JSON
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js中数据结构 js中原生自带的数据结构比较简单,主要有数组Array.映射Map.集合Set.我们可以根据这三个基本数据结构实 ...
html js 遍历数组,分享几种原生JS数组遍历的方法和应用
数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢? OK,今天就分享几种原生JS方法,从原生开始学习,有助于大家应用到各种框架[小程序.三大框架等]中去,毕竟原生才是基本.一共 ...

原生js生成渐变色数组集合

原生js生成渐变色数组集合相关推荐

最新文章

热门文章