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 相关文章推荐
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
js function使用心得
2010/05/10 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
Javascript的this用法
2017/01/16 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
如何在django中添加日志功能
2020/02/06 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
Java程序员面试90题
2013/10/19 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
运动会表扬稿
2015/01/16 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL