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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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循环输出数据库内容的代码
2008/05/24 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
php array的学习笔记
2012/05/16 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
Python书单 不将就
2017/07/11 Python
python numpy 按行归一化的实例
2019/01/21 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python插件机制实现详解
2020/05/04 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
教育科学研究生自荐信
2013/10/09 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
个人更名证明
2015/06/23 职场文书
如何写好活动总结
2019/06/21 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
使用springMVC所需要的pom配置
2021/09/15 Java/Android