学步园

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;
		if (v=="") {
			return false;
		};
		if(v.indexOf("#")>0){
			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 += ("RGB("+R+","+G+","+B+")<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();
		this.wBox.innerHTML += ("透明度："+o+"<br>");
	},
	init:function(){
		this.color();
		this.ap();
	}
};
</script>