JavaScript使用Range调色及透明度实例
作者:tianzitianxie 发布时间:2024-04-16 10:36:25
标签:JavaScript,Range
颜色搭配是件头疼的事,工作空隙,利用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>
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 定义线程最简单的方法:使用target指定线程要执行的目标函数,再使用start()启动。语法:class threading.Thread
- 现实生活中,有很多场景中的事情是同时进行的,比如开车的时候,手和脚共同来驾驶汽车,再比如唱歌跳舞也是同时进行的。以上这些可以理解为多任务。那
- title: Python 装饰器装饰类中的方法comments: truedate: 2017-04-17 20:44:31tags: [
- pip install命令用于安装扩展库,由于安装扩展库需要从国外网站下载,速度较慢,可以使用-i选项设置临时使用国内的镜像网站。命令格式:
- 我的代码结构如下所示不能执行,会出现报错<RadioGroup v-model="animal"> <
- MySQL在5.1引入了一个rename database操作,但在MySQL5.1.23后又不支持这个命令。可以说是一个实验性的功能,没有
- php代码实现读取文件头判断文件类型,支持图片、rar、exe等后缀。案例:<?php $filename = "11.jp
- 本文为大家分享了Python3实现发送QQ邮件功能:html,供大家参考,具体内容如下之前已经成功发送了qq邮件。下面贴出html格式的qq
- 一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick
- 读取问题如下所示,我们在文本中写了一个问题,然后将其读取出来。“黄河远上白云间,一片孤城万仞山。”的作者是谁?王之涣李白白居易杜甫file
- BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩
- 实验环境 Pytorch 1.7.0torchvision 0.8.2Python 3.8CUDA10.2 + cuDNN v7.
- 0.前置知识Go中的struct。mysql、Gin框架。Web基础。1.架构使用mysql作为数据库,Gin作为Web框架。2.功能模块1
- //TransmitFile实现下载protected void Button1_Click(object sender, EventArg
- 1.介绍当我们使用pytorch来构建网络框架的时候,也会遇到和tensorflow(tensorflow __init__、build 和
- MySQL时间盲注五种延时方法 (PWNHUB 非预期解)延时注入函数五种:sleep(),benchmark(t,exp),笛卡尔积,GE
- 前言本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是
- 在深度学习中,经常需要动态调整学习率,以达到更好地训练效果,本文纪录在pytorch中的实现方法,其优化器实例为SGD优化器,其他如Adam
- asp取得字段属性代码:set AdoX = server.createobject("adox.c
- 在实际的应用中,Access做应用程序时,经常会做成"数据"和"程序"两个数据库,"数据&