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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
js验证账户名是否重复
May 26 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
JS前端使用canvas实现物体的点选示例
Aug 05 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 全局变量范围分析
2009/08/07 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Python 图片处理库exifread详解
2021/02/25 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
会计出纳岗位职责
2013/12/25 职场文书
协议书与合同的区别
2014/04/18 职场文书
新闻传播专业求职信
2014/07/22 职场文书
营销学习心得体会
2014/09/12 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
硕士学位申请报告
2015/05/15 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android