css背景透明度轉換工具（相容ie6）

 

<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>