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


Posted in Javascript onSeptember 25, 2016

颜色搭配是件头疼的事,工作空隙,利用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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Vue-Router的使用方法
Sep 05 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
You might like
NOT NULL 和NULL
2007/01/15 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python实现归并排序算法
2018/11/22 Python
Python中的heapq模块源码详析
2019/01/08 Python
如何通过python画loss曲线的方法
2019/06/26 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
采购员岗位职责
2013/11/15 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
银行进社区活动总结
2014/07/07 职场文书
文员岗位职责
2015/02/04 职场文书