JavaScript使用Range调色及透明度实例
更新时间：2016年09月25日 16:16:24 作者：tianzitianxie
本文给大家分享的是使用range做的一个简单的手动调色并可以得到RGB值的小工具，非常的实用，有需要的小伙伴可以参考下
颜色搭配是件头疼的事，工作空隙，利用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>
相关文章
这篇文章主要介绍了小程序瀑布流组件实现翻页与图片懒加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
本文通过php jquery和mysql三者相结合，实现web版在线拍照上传并可在线浏览，下面给大家分享基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片，需要的朋友可以参考下2015-09-09
在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下2014-02-02
js-utils封装了常用的工具函数,开箱即用,下面这篇文章主要给大家介绍了关于能够事半功倍的JS utils工具函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了js利用iframe实现选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
模态框（Modal）是覆盖在父窗体上的子窗体。下面通过本文给大家介绍Bootstrap 模态框（Modal）带参数传值实例代码，需要的朋友参考下吧2017-08-08
JS中showModalDialog关闭子窗口刷新主窗口用法详解
这篇文章主要介绍了JS中showModalDialog关闭子窗口刷新主窗口用法,结合具体实例形式较为详细的分析了showModalDialog常见用法与相关使用技巧,需要的朋友可以参考下2017-03-03
这篇文章主要是对html与javascript在浏览器中的加载顺序问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少。2009-10-10
for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历 数组、对象、字符串。本文将详细为大家介绍JS中的六种For循环的使用，需要的可以参考一下2022-04-04
最新评论