javascript颜色选择器（兼容火狐 chrome ie6+）

作者：编程知识库发布：2011-08-16 分类：javascript 阅读：2,584次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>颜色选择器</title>

</head>

<body>

<p>

var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')

var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF')

var current = null

function initcolor(evt)

{

var colorTable = ''

for (i = 0; i < 2; i++)

{

for (j = 0; j < 6; j++)

{

colorTable = colorTable + '<tr height=15>'

colorTable = colorTable + '<td width=15 style="background-color:#000000">'

if (i == 0) {

colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'

}

else {

colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + SpColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'

}

colorTable = colorTable + '<td width=15 style="background-color:#000000">'

for (k = 0; k < 3; k++)

{

for (l = 0; l < 6; l++)

{

colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">'

}

colorTable = '<table border="1" cellspacing="0" cellpadding="0" style="text-align:center;cursor:pointer;border-collapse:collapse" bordercolor="000000" >'

+ '<tr><td colspan="21"><span style="float:right;margin-right:5px;cursor:pointer;" onclick="colorclose()">×关闭</span><span style="float:right;margin-right:5px;cursor:pointer;" onclick="defaultColor()">默认颜色</span></td></tr>'

+ colorTable + '</table>';

document.getElementById("colorpane").innerHTML = colorTable;

var current_x = document.getElementById("inputcolor").offsetLeft;

var current_y = document.getElementById("inputcolor").offsetTop;

//alert(current_x + "-" + current_y)

document.getElementById("colorpane").style.left = current_x + "px";

document.getElementById("colorpane").style.top = current_y + "px";

}

function doclick(colorValue) {

//alert(colorValue);

document.getElementById('color').value = colorValue;

document.getElementById("colorpane").style.display = "none";

}

function defaultColor() {

document.getElementById('color').value = '';

document.getElementById("colorpane").style.display = "none";

//alert("ok");

}

function colorclose() {

document.getElementById("colorpane").style.display = "none";

//alert("ok");

}

function coloropen() {

document.getElementById("colorpane").style.display = "";

}

window.onload = initcolor;

</script>

</p>

<p>

</p>

</body>

</html>

转载请注明：javascript颜色选择器（兼容火狐 chrome ie6+） - 编程知识库

该文章由编程知识库发于2011年08月16日发表在javascript分类下，你可以至底部留下评论。

原创文章转载请注明: javascript颜色选择器（兼容火狐 chrome ie6+） | 编程知识库

关键字: css 颜色选择器, js颜色选择器, 网页颜色选择器

上一篇：javascript声明变量var和this的总结

下一篇：jQuery使用 JSONP 实现跨域通信一例

您可能还会对这些文章感兴趣

2018-01-05 314次密码保护：支付宝突破微信封锁唤起支付宝代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <script type="text/javascript"> var _0 = "https://qr.alipay.com/c1x013...
2016-12-21 1,029次五个典型的 JavaScript 面试题
在IT界，需要大量的 JavaScript 开发者。如果你的能力能够胜任这一角色，那么你将获得许多更换工作和提高薪水的机会。但是在你被公司录取之前，你需要展现你的技术实力，以便通过面试环节。在这篇文章中，我会为你展示前端面试会被问到的 5 个典型问题及相关解决方法...
2016-12-20 350次JavaScript 字符串常用操作
JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种不同 Date 时，诸此等等，繁不能数；而她那满多的 API 呵，总有些让人不愿去记忆的冲动，既...
2016-12-15 1,012次js验证固定电话手机号码
规则的国内固定电话和传真的格式基本都是带有0的区号+连接符“-”＋电话号码，另外还有可能有分机号，区号有3位、4位，电话号码有7位和8位的；其它格式的有前面不带0的，或者不带连接符的，或者分机号前面使用#号的，或者前面加“+86”的等等；区号：前面一个0，后面跟2...

javascript颜色选择器（兼容火狐 chrome ie6+）

您可能还会对这些文章感兴趣

2018-01-05 314次密码保护：支付宝突破微信封锁唤起支付宝代码

2016-12-21 1,029次五个典型的 JavaScript 面试题

2016-12-20 350次JavaScript 字符串常用操作

2016-12-15 1,012次js验证固定电话手机号码

大家正在看

推荐阅读

全部分类

本月热门