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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
node中IO以及定时器优先级详解
2019/05/10 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python实现partial改变方法默认参数
2014/08/18 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
《王二小》教学反思
2014/02/27 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
爱祖国演讲稿
2014/05/04 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书