JS实现的网页上的颜色拾色器

更新时间：2016年04月07日 21:54:06 投稿：mdxy-dxy

这篇文章主要介绍了JS实现网页上的颜色拾色器,需要的朋友可以参考下

使用Js代码编写一个网页上用的颜色拾色器，也就是选择颜色用的，用鼠标单击任意颜色块,将弹出颜色值，当你想使用某种颜色而不知道颜色值的时候，用这个小特效可以告诉你颜色值是多少，比较方便。

<html>
<head>
<title>颜色拾色器</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>
<body style="font:menu">
<span class="style1"></span>
<table border="0" cellspacing="1" cellpadding="3" width="350" align="center" bgcolor="#dddddd">
<tr bgcolor="#FFFFFF"> 
<td width="10%" align="center"> 
<select name="select1" onchange="selectmenu(this.value)">
<option value="1" selected>红</option>
<option value="2">绿</option>
<option value="3">蓝</option>
<option value="4">灰</option>
</select>
</td>
<td width="90%" align="center"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td align="center" style="font-size:12px">用鼠标单击下面的颜色块,将弹出颜色值</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td width="10%" align="center"> 
  <table id="table1" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
for(i=0;i<=15;++i){
 document.write('<tr><td align="center" style="font:menu">'+ishex(i*17) +'</td><td id="Ltd' + i +'" bgcolor="rgb('+ (i*17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)"></td></tr>')
 document.all['Ltd' + i].num=i
}
function ishex(which){
    return which.toString(16);
}
</script>
</table></td>
<td width="90%" align="center"> 
<table id="table2" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
document.write('<tr><td></td>')
for(i=0;i<=15;++i){
 document.write('<td align="center" style="font:menu; ">'+ishex(i*17)+'</td>');
}
document.write('</tr>')
for(i=0;i<=15;++i){
 document.write('<tr>')
 document.write('<td align="center" style="font:menu;">'+ishex(i*17)+'</td>')
  for(j=0;j<=15;++j){
    document.write('<td id="Rtd'+i+'and'+j+'" style="font:menu;" bgcolor="rgb(0,'+(i*17)+','+(j*17)+')" width="15" height="15" onclick="clickright(this)"></td>');
 }
  document.write('</tr>')
}
</script>
</table>
</td>
</tr>
</table>
<script language="JavaScript">
function selectmenu(which){
 switch(which){
  case '1' :leftR();break;
     case '2' :leftG();break;
     case '3' :leftB();break;
     case '4' :leftA();break;
   }
}
function leftR(){
 for(i=0;i<=15;++i){
     document.all['Ltd'+i].bgColor='rgb('+(i*17)+',0,0)';
    }
  rightR(0)
}
function leftG(){
 for(i=0;i<=15;++i){
     document.all['Ltd'+i].bgColor='rgb(0,'+ (i*17) + ',0)';
 }
  rightG(0)
}
function leftB(){
 for(i=0;i<=15;++i){
     document.all['Ltd'+i].bgColor='rgb(0,0,'+(i*17)+')';
 }
  rightB(0)
}
function leftA(){
 for(i=0;i<=15;++i){
     document.all['Ltd'+i].bgColor='rgb('+(i*17)+','+(i*17)+','+(i*17)+')';
 }
  rightA()
}
function rightR(which){
 for(i=0;i<=15;++i){
     for(j=0;j<=15;++j){
       document.all['Rtd'+i+'and'+j].bgColor='rgb('+(which*17)+','+(i*17)+','+(j*17)+')';
  }
    }
}
function rightG(which){
 for(i=0;i<=15;++i){
  for(j=0;j<=15;++j){
   document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*17)+','+(which*17)+','+(j*17)+')';
  }
    }
}
function rightB(which){
 for(i=0;i<=15;++i){
  for(j=0;j<=15;++j){
   document.all['Rtd'+ i+'and'+j].bgColor='rgb('+(i*17)+','+(j*17)+','+(which*17)+')';
   }
    }
}
function rightA(){
 for(i=0;i<=15;++i){
  for(j=0;j<=15;++j){
   document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*16+j)+','+(i*16+j)+','+(i*16+j)+')';
  }
    }
}
function clickright(which){
 alert(which.bgColor)
}
function changeright(which){
 switch(select1.value){
  case '1' :rightR(which);break;
     case '2' :rightG(which);break;
     case '3' :rightB(which);break;
  }
}
</script>
</body>
</html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

颜色拾色器

javascript中类的定义方式详解(四种方式)
这篇文章主要介绍了javascript中类的定义方式,结合实例形式较为详细的分析了JavaScript中类的四种定义方式,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12
深入理解JavaScript 解构赋值
JavaScript的解构赋值是ES6引入的语法,允许以简洁的方式从数组或对象中提取数据并赋值给变量,包括数组解构、对象解构、参数解构、变量交换等,它可以大幅简化代码,提高开发效率,下面就一起来了解一下
2024-09-09
JS实现中文汉字按拼音排序的方法
这篇文章主要介绍了JS实现中文汉字按拼音排序的方法,涉及javascript针对中文字符串的转换、遍历、排序等相关操作技巧,需要的朋友可以参考下
2017-10-10
JavaScript的new date等日期函数在safari中遇到的坑
safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题，带着这个奇怪的问题我们通过本文一起学习吧
2016-10-10
微信小程序全局变量GLOBALDATA的定义和调用过程解析
这篇文章主要介绍了微信小程序全局变量GLOBALDATA的定义和调用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
javascript字符串循环匹配实例分析
这篇文章主要介绍了javascript字符串循环匹配,实例分析三种常用的字符串循环匹配的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
ES6学习笔记之map、set与数组、对象的对比
这篇文章主要给大家介绍了关于ES6学习笔记之map、set与数组、对象对比的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-03-03
手把手教你如何开发属于自己的一款小程序
相信大家都知道小程序是一种不需要下载安装即可使用的应用,下面这篇文章主要给大家介绍了关于如何开发属于自己的一款小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
javascript基本数据类型及类型检测常用方法小结
这篇文章主要介绍了javascript基本数据类型及类型检测常用方法,总结分析了javascript的基本数据类型与类型检测的常用操作方法,具有一定参考借鉴价值,需要的朋友可以参考下
2016-12-12
微信小程序实现带放大效果的轮播图
这篇文章主要为大家详细介绍了微信小程序实现带放大效果的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05

JS实现的网页上的颜色拾色器

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具