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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python构建网页爬虫原理分析
2017/12/19 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python3 求约数的实例
2019/12/05 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python else语句在循环中的运用详解
2020/07/06 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
小学教师师德反思
2014/02/03 职场文书
计生专干事迹
2014/05/28 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
年度考核个人总结
2015/03/06 职场文书
公司放假通知怎么写
2015/04/15 职场文书
升职自荐书
2019/05/09 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Oracle 区块链表创建过程详解
2021/05/15 Oracle