JavaScript使用Range调色及透明度实例
作者：tianzitianxie 时间：2024-04-16 10:36:25
颜色搭配是件头疼的事，工作空隙，利用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>
标签：JavaScript,Range
0
投稿猜你喜欢
Python+Turtle绘制可爱的可达鸭
2021-06-18 10:20:29
简述MySQL 正则表达式
2024-01-16 12:17:44
一篇文章带你了解Python和Java的正则表达式对比
2021-08-17 20:24:35
Python学习之魔法函数(filter,map,reduce)详解
2023-03-25 05:32:21
不通过数据源名DSN也能访问Access数据库吗？
2009-10-29 12:22:00
简单介绍Python的Django框架加载模版的方式
2022-09-17 16:49:31
Django中如何用xlwt生成表格的方法步骤
2023-07-17 07:47:12
简单介绍MySQL中的事务机制
2024-01-14 15:18:31
VS2015安装之后加装Sql server2014详细步骤
2024-01-18 04:39:56
快速认识CSS中的overflow属性
2009-05-29 16:36:00
python在非root权限下的安装方法
2023-12-05 20:28:35
Keras搭建孪生神经网络Siamese network比较图片相似性
2023-01-27 04:16:28
Python爬虫爬取商品失败处理方法
2021-04-11 11:26:31
利用Python的turtle库绘制玫瑰教程
2021-12-01 19:33:52
mysql 5.7.17 安装配置方法图文教程
2024-01-16 18:16:20
如何对MySQL数据库日志文件进行维护
2009-02-04 13:23:00
微信小程序 详解下拉加载与上拉刷新实现方法
2024-04-23 09:31:09
Python面向对象编程基础解析（一）
2021-08-10 15:05:12
Python中你所不知道的星号 * 用法
2022-08-06 15:25:43
Go并发同步Mutex典型易错使用场景
2024-05-02 16:23:54
