javascript编程开发中取色器及封装$函数用法示例
本文实例讲述了javascript编程开发中取色器及封装$函数用法。分享给大家供大家参考，具体如下：
1.封装$函数
function $(str){
//如果传入的是'#' 则选择id标签
//如果传入的是'.' 则选择所有的类名标签
//如果传入的既不是'#也不是'.' 选择复合标签
//判断传入的值
if(typeof str !='string'){
console.log('传入的参数有误!');
return null;
}
//获取参数的第一个字母
var firstChar=str.charAt(0);
var name=str.substr(1);
switch(firstChar){
case '#':
console.log('id选择器');
return document.getElementById(name);
break;
case '.':
//类选择器:getElementsByClassName是在js中新加入的,对于老的ie6,ie7无法兼容
console.log('类选择器');
//兼容性
//1.判断是否能够使用getElementsByClassName
if(!document.getElementsByClassName){
return document.getElementsByClassName(name);
}else{
//2.获取所有的标签
//3.逐个判断是否带有该类名
//4.如果有则添加到数组中
var resultElements=[];
var elements=document.getElementsByTagName('*');
// console.log(element);
for(var i=0;i<elements.length;i++){
var element=elements[i];
var class_name=element.className.split(' ');
for(var j=0;j<class_name.length;j++){
if(class_name[j]==name){
//加入到数组中去
resultElements.push(elements[i]);
console.log(resultElements);
}
}
}
return resultElements;
}
break;
default:
console.log('标签选择器');
name=str.substr(0);
return document.getElementsByTagName(name);
}
}
2.取色器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/select.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background:rgb(0,0,0);
margin:20px;
}
#btn{
padding:0 20px;
}
input{
width: 100px;
}
</style>
<script>
//javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
function bgColor(obj){
return obj.currentStyle.backgroundColor;
}
function compare(color1,color2){
if(color1>color2){
return -1;
}else if(color1<color2){
return 1;
}else{
return 0;
}
}
window.onload=function(){
var red;
var green;
var blue;
var boxColor=[];
$('#btn').onclick=function(){
red=Number($('#red').value);
green=Number($('#green').value);
blue=Number($('#blue').value);
boxColor=bgColor($('#box')).split('(');
boxColor=boxColor[1].split(')');
boxColor=boxColor[0].split(',');
if(red>255||red<0 || green>255||green<0 || blue>255||blue<0){
alert("颜色值出错了!");
return;
}
//变色定时器
var timer=setInterval(function(){
boxColor[0]=Number(boxColor[0])+compare(boxColor[0],red);
boxColor[1]=Number(boxColor[1])+compare(boxColor[1],green);
boxColor[2]=Number(boxColor[2])+compare(boxColor[2],blue);
$('#box').style.background='rgb('+boxColor[0]+','+boxColor[1]+','+boxColor[2]+')';
if(boxColor[0]==red&&boxColor[1]==green&&boxColor[2]==blue){
clearInterval(timer);
}
},10);
}
}
</script>
</head>
<body>
<div id="box"></div>
red:<input type="text" id="red">
green:<input type="text" id="green">
blue:<input type="text" id="blue">
<button id="btn">取色</button>
</body>
</html>
点击此处查看在线演示效果。
PS：这里再为大家推荐几款本站的相关在线工具：
在线RGB、HEX颜色代码生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools.jb51.net/color/jPicker
在线网页调色板工具：
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表：
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript使用onclick事件改变选中行的颜色
html页面的table 中一行一行的显示当然 div也行 可设置在鼠标放上去时改变其颜色 部分代码如下 复制代码 代码如下: <script type="text/javascript">var currentActiveRow; //当前活动行 //改变选中行的颜色function changeActiveRow(obj) { if (currentActiveRow) { currentActiveRow.style.backgroundColor
-
js从10种颜色中随机取色实现每次取出不同的颜色
昨天在做js 从10种颜色中随机取色,并每次取出的颜色不同的时候,考虑了很多,最终用如下来实现: 复制代码 代码如下: var colorList = ["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007"
-
js 颜色选择器（兼容firefox）
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
JavaScript获取系统自带的颜色选择器功能（图）
效果如图所示:下面是获取系统自带的颜色选择器的代码: function $(obj) { return document.getElementById(obj); } function pickColor() { if (!window.isIE) return; var sColor = $('dlgHelper').ChooseColorDlg(); var color = sColor.toString(16); while (color.length [Ctrl+A 全选 注:如需引入外
-
5款Javascript颜色选择器
1. Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. 2. Color Picker Control (演示地址) Yahoo! UI Library中的颜色选择器. 3. jQuery Color Picker 一个简单的颜色选择控件.操作方式与Adobe photoshop中颜色选择操作置. 4. iColorPicker iColorPicker是一个只有6KB大小的
-
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实现的RGB网页颜色在线取色器完整实例
本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me
-
JS小功能（button选择颜色)简单实例
效果: 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> #red { width: 260px; height: 200px; background: #FF0000; display:
-
Javascript中的匿名函数与封装介绍
迷惑了一会儿不同JS库的封装后,终于有了点头绪.大致就是: 复制代码 代码如下: 创建一个自调用匿名函数,设计参数window,并传入window对象. 而这个过程的目的则是, 复制代码 代码如下: 使得自身的代码不会被其他代码污染,同时也可以不污染其他代码. jQuery 封装 于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的 复制代码 代码如下: (function( window, undefined ) { var jQuery = (function(
-
原生Javascript封装的一个AJAX函数分享
最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ