js 颜色选择器(兼容firefox)


Posted in Javascript onMarch 05, 2009
<!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> 
<style type="text/css"> 
body{ 
    text-align:center; 
} 
</style> 
</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(this.style.backgroundColor)">'} 
else{ 
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'} 
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(this.style.backgroundColor)">' 
} 
} 
} 
} 
colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">' 
+'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">' 
         +'<span style="float:left;color:#999999;">搜索吧|为站长提供专业知识搜索</span>' 
         +'<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>' 
+'</td></table>' 
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">' 
+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(obj){ 
    alert(obj); 
} 
function colorclose(){ 
    document.getElementById("colorpane").style.display = "none"; 
    //alert("ok"); 
} 
function coloropen(){ 
    document.getElementById("colorpane").style.display = ""; 
} 
window.onload = initcolor; 
</script> 
</p> 
<p> </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>
Javascript 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
小型js框架veryide.librar源代码
Mar 05 #Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 #Javascript
javascript radio 联动效果
Mar 04 #Javascript
js 页面执行时间计算代码
Mar 04 #Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 #Javascript
ajax 文件上传应用简单实现
Mar 03 #Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php 不同编码下的字符串长度区分
2009/09/26 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
AngularJS 教程及实例代码
2017/10/23 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python变量类型知识点总结
2019/02/18 Python
python+mysql实现教务管理系统
2019/02/20 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
数据库的约束含义
2012/09/09 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
《王二小》教学反思
2014/02/27 职场文书
青年文明号创建承诺
2014/03/31 职场文书
师德师风个人反思
2014/04/28 职场文书