<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 = "color conversion" 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] = "0123456789 abcdef ";
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;/* process the filter in 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 x 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>