<style type="text/css">
#writeBox{background:#000;color:#fff;font-size:12px;line-height:20px;border:1px solid #ddd;padding:10px;}
</style>
color:<input type="text" id="color"> op:<input type="text" id="op" value="" /><input value="颜色转换" type="button" id="btn">
<div id="writeBox"></div>
<script type="text/javascript">
function $(id){
return typeof id === "object" ? id : document.getElementById(id);
}
window.onload = function(){
$("btn").onclick = function(){
var c = new ColorChange();
c.init();
};
}
function ColorChange(){
this.colorBox = $("color");
this.tex = $("op");
this.wBox = $("writeBox");
};
ColorChange.prototype = {
color : function(){
var c = this.colorBox,v = c.value;
var op = this.tex.value;
if (v=="") {
return false;
};
var aa = v.substring(0,1);
if(aa == "#"){
v = v.substring(1,v.length);
};
var b=new Array();
for(x=0;x<3;x++){
b[0]=v.substr(x*2,2);
b[3]="0123456789abcdef";
b[1]=b[0].substr(0,1);
b[2]=b[0].substr(1,1);
b[20+x]=b[3].indexOf(b[1])*16+b[3].indexOf(b[2]);
};
var R = b[20],G = b[21],B = b[22];
this.wBox.innerHTML += ":root div {<br>filter:none;/*处理ie9中的滤镜*/<br>background:rgba("+R+","+G+","+B+","+op+");<br>}<br>";
},
ap : function(){
var a = this.tex.value;
if(a==""){return false;}
var num = Math.floor((Math.floor(a*100)/100)*255);
var num_10 = (Math.floor(a*100)/100);
var num_change = num.toString(16);
if (num_change.length == 1){
num_change = "0" + num_change;
};
var o = num_change.toUpperCase();
o = o+this.colorBox.value;
this.wBox.innerHTML += "div {<br>filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#"+o+"', endColorstr='#"+o+"');<br>}<br>";
},
init:function(){
this.color();
this.ap();
}
};
</script>