javascript颜色选择器(兼容火狐 chrome ie6+)
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>颜色选择器</title>
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
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><input type="text" name="color" id="color" onclick="coloropen(event)"/> </p>
<p> </p>
<p> </p>
<p>
<input type="button" value="颜色选择" onclick="coloropen(event)" id="inputcolor" />
</p>
<p> </p>
<div id="colorpane" style="position:absolute;z-index:999;display:none;"></div>
</body>
</html>
您可能还会对这些文章感兴趣
2018-01-05 528次密码保护:支付宝突破微信封锁唤起支付宝代码
<!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,202次五个典型的 JavaScript 面试题
在IT界,需要大量的 JavaScript 开发者。如果你的能力能够胜任这一角色,那么你将获得许多更换工作和提高薪水的机会。但是在你被公司录取之前,你需要展现你的技术实力,以便通过面试环节。在这篇文章中,我会为你展示前端面试会被问到的 5 个典型问题及相关解决方法...
2016-12-20 419次JavaScript 字符串常用操作
JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Date 时,诸此等等,繁不能数;而她那满多的 API 呵,总有些让人不愿去记忆的冲动,既...
2016-12-15 1,102次js验证固定电话手机号码
规则的国内固定电话和传真的格式基本都是带有0的区号+连接符“-”+电话号码,另外还有可能有分机号,区号有3位、4位,电话号码有7位和8位的;其它格式的有前面不带0的,或者不带连接符的,或者分机号前面使用#号的,或者前面加“+86”的等等; 区号:前面一个0,后面跟2...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback