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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
jQuery事件详解
Feb 23 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
小型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/21 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php实现telnet功能示例
2014/04/08 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
用Python编程实现语音控制电脑
2014/04/01 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python找出因数与质因数的方法
2019/07/25 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python实现IOU计算案例
2020/04/12 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
学校采购员岗位职责
2014/01/02 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
导游词之天津古文化街
2019/11/09 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Java实现简易的分词器功能
2021/06/15 Java/Android