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图表动画插件Highcharts Examples
Apr 16 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery中:reset选择器用法实例
2015/01/04 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python set常用操作函数集锦
2017/11/15 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
升职自荐信范文
2013/10/05 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
车贷收入证明范本
2014/01/09 职场文书
企业消防安全制度
2014/02/02 职场文书
升职自荐书
2019/05/09 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android