JavaScript使用Range调色及透明度实例

时间：2021-05-26

颜色搭配是件头疼的事，工作空隙，利用range做个简单的手动调色，可得到rgb值和相应的十六进制色值。因为用到range标签，建议使用搜狗、火狐，IE10及以上版本代码如下：

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>test16_color</title> <meta name="description" content=""> <meta name="author" content="Administrator"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <style type="text/css"> body, div,span {margin: 0;padding: 0;} .div1 {margin: 20px auto;border: 1px solid black;width: 400px;height: 250px;opacity: 1;} .div2 {margin: 0 auto;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: 3px 15px;outline: none;} h2 {margin: 3px auto;} </style> </head> <body> <div class="div1" id="div1"> </div> <div class="div2"> <h2><span>R（红色）：</span><span class="val" id="rValue">255</span><input type="range" min="0" max="255" value="255" step="1" id="rRange"/></h2> <h2><span>G（绿色）：</span><span class="val" id="gValue">255</span><input type="range" min="0" max="255" value="255" step="1" id="gRange"/></h2> <h2><span>B（蓝色）：</span><span class="val" id="bValue">255</span><input type="range" min="0" max="255" value="255" step="1" id="bRange"/></h2> <h2><span>O（透明）：</span><span class="val" id="oValue">1</span><input type="range" min="0" max="1" value="1" step="0.1" id="oRange"/></h2> <h2 id="rgb1">RGB(255,255,255)</h2> <h2 id="rgb2">#FFFFFF</h2> </div> </body> <script type="text/javascript"> (function() { var inputNodes = document.getElementsByTagName("input"); var len = inputNodes.length; for(var i=0;i<len;i++) { var inputNode = inputNodes[i]; inputNode.index = i; inputNode.onchange = function() { var inputVal = inputNodes[this.index].value; var inputIdAttr = inputNodes[this.index].getAttribute("id"); var spanIdAttr = inputIdAttr.replace("Range","Value"); document.getElementById(spanIdAttr).innerHTML = inputVal; changeColor(); }; } function changeColor() { var rgbColor = ""; var oColor = "#"; for(var i=0;i<len-1;i++) { var inputNode = inputNodes[i]; rgbColor += rgbColor!=""?",":""; rgbColor += inputNode.value; var n_10 = parseInt(inputNode.value); oColor += n_10.toString(16).length==1?"0"+n_10.toString(16):n_10.toString(16); } var div1 = document.getElementById("div1"); div1.style.background = "RGB("+rgbColor+")"; div1.style.opacity = inputNodes[len-1].value; var rgb1 = document.getElementById("rgb1"); rgb1.innerHTML = "RGB("+rgbColor+")"; var rgb2 = document.getElementById("rgb2"); rgb2.innerHTML = oColor.toUpperCase(); } })(); </script></html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章