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 document.createDocumentFragment()
Apr 04 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
Javascript中this的用法详解
Sep 22 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP学习之数组值的操作
2011/04/17 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
python的else子句使用指南
2016/02/27 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
pycharm修改file type方式
2019/11/19 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
资产经营总监岗位职责
2013/12/04 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
中秋节主题班会
2015/08/14 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang