思路:
输入颜色格式转换为RGB十进制计算后,统一转换为RGB格式输出
效果图:
<!DOCTYPE html>
<html>
<head>
<title>颜色动态加载</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
/**
* author : 蟹海之恋
* startColor : 开始颜色
* endColor : 结束颜色
* step : 阶段数
* HINT : 支持颜色格式混搭或统一格式
*/
function gradualColor(startColor, endColor, step) {
var startRGB = convertColor(startColor);
var startR = startRGB[0] - 0;//转数字
var startG = startRGB[1] - 0;
var startB = startRGB[2] - 0;
var endRGB = convertColor(endColor);
var endR = endRGB[0];
var endG = endRGB[1];
var endB = endRGB[2];
var tR = (endR - startR) / step;//间值
var tG = (endG - startG) / step;
var tB = (endB - startB) / step;
var colorArr = [];
for (var i = 0; i < step; i++) {
//计算每一步的rgb值
var rgb = 'rgb(' + parseInt((tR * i + startR)) + ',' + parseInt((tG * i + startG)) + ',' + parseInt((tB * i + startB)) + ')';
colorArr.push(rgb);
}
return colorArr;
}
function convertColor (color)
{
if(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {//#FFF或#FFFFFF格式
if (color.length == 4) {//#FFF转#FFFFFF格式
var colorTemp = "#";
for (var i = 1; i < 4; i += 1) {
colorTemp += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorTemp;
}
var colorNew = [];
for (var i = 1; i < 7; i += 2) {
colorNew.push(parseInt("0x" + color.slice(i, i + 2)));
}
return colorNew;
}
else if(/^rgb/.test(color.toLowerCase())) {//rgb(255,255,255)格式
var colorNew = color.replace(/(?:rgb|RGB|\(|\))/g, "").split(",");
console.log(colorNew);
return colorNew;
}
else
alert("颜色输入格式不对");
}
$(function(){
var gradual = new gradualColor('#0000FF', 'RGB(175,238,238)', 10);//支持颜色格式混搭或统一格式
for (var i = 0; i < gradual.length; i++) {
var htmls = '';
if (i == 0) {
htmls = '<tr><td id="water' + i + '" style="width:120px;height:20px;margin-left:10px;"><div></div></td><td style="width:70px;text-align:center">高</td></tr>';
} else if (i == gradual.length - 1) {
htmls = '<tr><td id="water' + i + '"style="width:120px;height:20px;margin-left:10px;"><div></div></td><td style="width:70px;text-align:center">低</td></tr>';
} else {
htmls = '<tr><td id="water' + i + '" style="width:120px;height:20px;margin-left:10px;"><div></div></td></tr>';
}
$("#Watercolorlevel").append(htmls);
$("#water" + i).css("background-color", gradual[i]);
}
});
</script>
</head>
<body>
<table id="Watercolorlevel">
</table>
</body>
</html>
FAQ :
1.Q : 为什么startRGB要转数字而endRGB不需要?
A : 因为startRGB和endRGB做差时会先被强制转换为数字再做减法;而后续计算每步颜色只用startRGB做加减法,所以endRGB就没转数字。
2.Q : "/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/"是什么意思
A : 此为正则表达式。其中^以后边字符开头,$以前边字符结束,[0-9a-fA-F]数字字母,{3}{6}3位6位的。然后用/包起来作为表达式主体。具体语法请参照相关内容。