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)

相关推荐

  • JavaScript获取图片像素颜色并转换为box-shadow显示

    JavaScript获取图片像素颜色并转换为box-shadow显示

    一.原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { va

  • 漂亮! js实现颜色渐变效果

    漂亮! js实现颜色渐变效果

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src

  • JavaScript随机生成颜色的方法

    废话不多说了直接给大家贴js代码了,具体代码如下所述: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button

  • JS实现的系统调色板完整实例

    JS实现的系统调色板完整实例

    本文实例讲述了JS实现的系统调色板.分享给大家供大家参考,具体如下: 运行效果图如下: 整体页面代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DW调色板</title> <script type="text/javascript" langu

  • JavaScript制作颜色反转小游戏

    游戏规则: 单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this

  • JS批量修改PS中图层名称的方法

    复制代码 代码如下: #target photoshopapp.bringToFront(); if (documents.length == 0) { alert("没有可处理的文档"); } else { var visibility = false; var docRef = activeDocument; var layers = docRef.layers; if (layers.length == 1 && docRef.activeLayer.isBack

  • JS实现的在线调色板实例(附demo源码下载)

    JS实现的在线调色板实例(附demo源码下载)

    本文实例讲述了JS实现的在线调色板.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ColorSchemer -

  • js实现按钮颜色渐变动画效果

    js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

  • 用JavaScript仿PS里的羽化效果代码

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>用JavaScript防PS里的羽化效果代码 - www.jb51.net</title> </head> <body onload=setValues()> <center&g

  • js实现的简单radio背景颜色选择器代码

    js实现的简单radio背景颜色选择器代码

    本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • JS 网页安全色调色板 DW风格

    DW调色板 var ColorHex=new Array('00','33','66','99','CC','FF') var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF') var current=null function intocolor() { var colorTable='' for (i=0;i' colorTable=colorTable+' ' if (i==0){ col

  • js实现的在线调色板功能完整实例

    js实现的在线调色板功能完整实例

    本文实例讲述了js实现的在线调色板功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <meta name="keywords" content="调色板" /> <meta name=&

  • 基于JavaScript实现随机颜色输入框

    基于JavaScript实现随机颜色输入框

    废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl

随机推荐