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>
0
投稿
猜你喜欢
- 1、pd.cut()用于将数据值按照值本身进行分段并排序到 bins 中。参数包含:x, bins, right, include_lowe
- 我就废话不多说了,直接上代码吧!import torchimport torch.nn.functional as Fimport nump
- 这篇文章主要介绍了基于Python实现扑克牌面试题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 一、前言昨夜刷b站的时候,看到了一条评论,形式如下图,于是心血来潮写了个python脚本,可以根据文字来生成这种由emoji拼接成的“文字”
- 先来看看js中的Null类型表示什么?null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象,一般一个未定义的变量在初次使用
- 报错:raise MissingSchema(requests.exceptions.MissingSchema: Invalid URL
- 守来说,AJAX在现在是热得不能再热的技术。没有人能否认,它拥有大批的支持者。在CNN上,它从二月份的一个不被看好的词语到十月份成长成一个初
- django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.
- 原理:将数据的二进制形式写入图像红色通道数据二进制的低位只支持png格式的输出写入数据go run shadow.go -in="
- 听名字就知道这个函数是用来求tensor中某个dim的前k大或者前k小的值以及对应的index。用法torch.topk(input, k,
- 问题Go语言在编译时不会将配置文件这类第三方文件打包进二进制文件中它既受当前路径的影响,也会因所填写的不同而改变,并非是绝对可靠的解决命令行
- MatrixOne是一个新一代超融合异构数据库,致力于打造单一架构处理TP、AP、流计算等多种负载的极简大数据引擎。MatrixOne由Go
- 这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要
- 2018年1月3日,王思聪被迫动用自己的微博,为一个诞生不到10天的App打了广告,“每天我都发奖金,今晚9点就发10万”。对他而言,这天的
- react-native安装流程1.npx react-native init AwesomeProject报错运行 cd ./demo/i
- 本文实例讲述了python中list循环语句用法。分享给大家供大家参考。具体用法分析如下:Python 的强大特性之一就是其对 list 的
- 最近刚接触了公司的服务器,使用的是Windows 2003 server + IIS 6.0 服务器,在使用无组件上传文件时产生这个错误时:
- 另:@会影响效率如:@mysql_connect() 可以导出错误,但会影响效率。mysql与mysqli的区别:
- 1 IDLE1.1 IDLE是python创初人Guido van Rossum使用python and Tkinter来创建的一个集成开发
- fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行。它的工作方式和readlin