<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#show{
width:200px;
height:200px;
}
</style>
<head>
<body>
<div id="show"></div>
<body>
<script type="text/javascript">
var int=self.setInterval("changeColor()",20);
$('#show').css('background-color','#'+Math.floor(Math.random()*16777215).toString(16));
function changeColor(){
var result = getRGB($('#show').css('background-color'));
if(result[2]<255){
result[2]=result[2]+1;
}else if(result[1]<255){
result[1]=result[1]+1;
}else if(result[0]<255){
result[0]=result[0]+1;
}
var newHex = result[0].toString(16)+result[1].toString(16)+result[2].toString(16);
$('#show').css('background-color','#'+newHex);
}
function getRGB(color) {
var result;
if ( color && color.constructor == Array && color.length == 3 )
return color;
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
return colors[jQuery.trim(color).toLowerCase()];
}
</script>
</html>
提取颜色的这个方法是网上搜到的一个animation的插件里面用到的,直接拿来主义了。
仅供娱乐,请勿乱踩,乱踩砍脚。