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圆形浮动菜单特效代码
Mar 03 Javascript
php与js的区别是什么
Aug 05 Javascript
JS检测图片大小的实例
Aug 21 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 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
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP7 list() 函数修改
2021/03/09 PHP
javascript内存管理详细解析
2013/11/11 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python实现遍历文件夹修改文件后缀
2018/08/28 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python反扒机制的5种解决方法
2021/02/06 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
英文自荐信
2013/12/19 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
Golang 入门 之url 包
2022/05/04 Golang