JavaScript使用Range调色及透明度实例
颜色搭配是件头疼的事,工作空隙,利用range做个简单的手动调色,可得到rgb值和相应的十六进制色值。因为用到range标签,建议使用搜狗、火狐,IE10及以上版本代码如下:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <!--AlwaysforcelatestIErenderingengine(eveninintranet)&ChromeFrame Removethisifyouusethe.htaccess--> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <title>test16_color</title> <metaname="description"content=""> <metaname="author"content="Administrator"> <metaname="viewport"content="width=device-width;initial-scale=1.0"> <!--Replacefavicon.ico&apple-touch-icon.pngintherootofyourdomainanddeletethesereferences--> <linkrel="shortcuticon"href="/favicon.ico"> <linkrel="apple-touch-icon"href="/apple-touch-icon.png"> <styletype="text/css"> body,div,span{margin:0;padding:0;} .div1{margin:20pxauto;border:1pxsolidblack;width:400px;height:250px;opacity:1;} .div2{margin:0auto;width:600px;text-align:center;} span{width:180px;display:inline-block;text-align:right;} span.val{width:50px;display:inline-block;text-align:left;} input{margin:3px15px;outline:none;} h2{margin:3pxauto;} </style> </head> <body> <divclass="div1"id="div1"> </div> <divclass="div2"> <h2><span>R(红色):</span><spanclass="val"id="rValue">255</span><inputtype="range"min="0"max="255"value="255"step="1"id="rRange"/></h2> <h2><span>G(绿色):</span><spanclass="val"id="gValue">255</span><inputtype="range"min="0"max="255"value="255"step="1"id="gRange"/></h2> <h2><span>B(蓝色):</span><spanclass="val"id="bValue">255</span><inputtype="range"min="0"max="255"value="255"step="1"id="bRange"/></h2> <h2><span>O(透明):</span><spanclass="val"id="oValue">1</span><inputtype="range"min="0"max="1"value="1"step="0.1"id="oRange"/></h2> <h2id="rgb1">RGB(255,255,255)</h2> <h2id="rgb2">#FFFFFF</h2> </div> </body> <scripttype="text/javascript"> (function(){ varinputNodes=document.getElementsByTagName("input"); varlen=inputNodes.length; for(vari=0;i<len;i++){ varinputNode=inputNodes[i]; inputNode.index=i; inputNode.onchange=function(){ varinputVal=inputNodes[this.index].value; varinputIdAttr=inputNodes[this.index].getAttribute("id"); varspanIdAttr=inputIdAttr.replace("Range","Value"); document.getElementById(spanIdAttr).innerHTML=inputVal; changeColor(); }; } functionchangeColor(){ varrgbColor=""; varoColor="#"; for(vari=0;i<len-1;i++){ varinputNode=inputNodes[i]; rgbColor+=rgbColor!=""?",":""; rgbColor+=inputNode.value; varn_10=parseInt(inputNode.value); oColor+=n_10.toString(16).length==1?"0"+n_10.toString(16):n_10.toString(16); } vardiv1=document.getElementById("div1"); div1.style.background="RGB("+rgbColor+")"; div1.style.opacity=inputNodes[len-1].value; varrgb1=document.getElementById("rgb1"); rgb1.innerHTML="RGB("+rgbColor+")"; varrgb2=document.getElementById("rgb2"); rgb2.innerHTML=oColor.toUpperCase(); } })(); </script> </html>