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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Django中Middleware中的函数详解
2019/07/18 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python新手学习可变和不可变对象
2020/06/11 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python 检测图片是否有马赛克
2020/12/01 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
园林施工员岗位职责
2013/12/11 职场文书
培训班主持词
2014/03/28 职场文书
2015年公司新年寄语
2014/12/08 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
react 路由Link配置详解
2021/11/11 Javascript
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers