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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
色色整理的PHP面试题集锦
2012/03/08 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python实现代码统计工具
2019/09/19 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
2014年会计工作总结
2014/11/27 职场文书
python实现网络五子棋
2021/04/11 Python
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers