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 相关文章推荐
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
小型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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
JavaScript执行顺序详细介绍
2013/12/04 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
上班上网检讨书
2014/01/29 职场文书
投资合作协议书范本
2014/04/17 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
党员志愿者活动总结
2014/06/26 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
投标单位介绍信
2015/05/05 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript