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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
使用Mock.js生成前端测试数据
Dec 13 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php实现图片缩放功能类
2013/12/18 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
python微信公众号开发简单流程
2018/03/23 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python多线程分块读取文件
2019/08/29 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
大学生最新职业生涯规划书范文
2014/01/12 职场文书
竞选班委演讲稿
2014/04/28 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS