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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
jquery text()要注意啦
Oct 30 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
详解Vue数据驱动原理
Nov 17 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的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
js特殊字符转义介绍
2013/11/05 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python numpy元素的区间查找方法
2018/11/14 Python
python实现按首字母分类查找功能
2019/10/31 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
ET Mall东森购物网:东森严选
2017/03/06 全球购物
党员自我评价分享
2013/12/13 职场文书
工作失职检讨书范文
2014/01/16 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
运动会广播稿80字
2014/01/23 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
MySQL系列之四 SQL语法
2021/07/02 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript