JS练习:选择颜色,得到其HEX 和RGB
2015-12-30 15:49
756 查看
JS部分:
html 部分:
function getRGB(){ var panelCOLOR=$('#color').val().toUpperCase(); $('#hex').val(panelCOLOR); var hex = [panelCOLOR.substr(1,2),panelCOLOR.substr(3,2),panelCOLOR.substr(5,2)]; var rgb = [undefined,undefined,undefined]; var hexABC = ['A','B','C','D','E','F']; var hexNum = [10,11,12,13,14,15]; var i = -1; for(var x of hex){ console.log('hex'+hex); i=i+1; var m = x.substr(0,1); var n = x.substr(1,1); console.log('i'+i); if(isNaN(x) == false){ rgb[i] = parseInt(m)*16+parseInt(n); var rgbColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'; }else{ if(hexABC.indexOf(m)>-1){ var p = hexABC.indexOf(m); m = hexNum[p]; } if(hexABC.indexOf(n)>-1){ var q = hexABC.indexOf(n); n = hexNum[q]; } rgb[i] = parseInt(m)*16+parseInt(n); rgbColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'; } } $('#rgb').val(rgbColor); }
html 部分:
<table class="table table-bordered"> <caption class="text-center">click the button,get HEX and RGB the color you choosed!</caption> <thead> <tr> <th class="text-center">HEX</th> <th class="text-center">RGB</th> <th class="text-center">COLOR</th> </tr> </thead> <tbody> <tr> <td><input id="hex" type="text" value="" readonly></td> <td><input id="rgb" type="text" value="" readonly></td> <td><input id="color" type="color" value=""></td> </tr> <tr> <td class="text-center" colspan="3"> <button onClick=getRGB()>click me</button> </td> </tr> </tbody> </table>
相关文章推荐
- 基于JavaScript实现手机短信按钮倒计时(超简单)
- JavaScript中的常见问题
- javascript模块化编程
- JavaScript for循环中的增量
- 【ExtJs】 ExtJs4.2 基本表单组件的使用
- 不可错过的javascript迷你库
- 文档显示部件直接使用javascript脚本介绍
- JavaScript 键盘事件
- JSP页面内嵌PDF文档
- js计时器
- js闭包
- js正则表达式语法
- Json序列化为对象方法
- Javascript 剪贴板的 使用以及在mozilla下的兼容
- JavaScript 鼠标事件
- js库中$冲突的解决方法
- JavaScript 扩展内置函数
- 深入剖析 JavaScript 的深复制
- js如何知道checkbox是否被选中,并且选中的话让input元素变为不可编辑
- JS 提交form表单