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

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

<!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 实现跨域通信一例

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

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...

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

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

大家正在看

推荐阅读

全部分类

本月热门