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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 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 破解防盗链图片函数
2008/12/09 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python实现在线翻译功能
2020/03/03 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
html5与css3小应用
2013/04/03 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
群众路线个人整改措施
2014/10/24 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
导游词之西安骊山
2019/12/03 职场文书
python字典的元素访问实例详解
2021/07/21 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL