js颜色选择器修改版(兼容firefox,chrome)
2011-07-30 23:09
525 查看
<!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> </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 = nullfunction 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(\'#' + SpColorHex[j] + '\')">' } else { colorTable = colorTable + '<td width=15 style="cursor:pointer;background-color:#' + SpColorHex[j] + '" onclick="doclick(\'#' + SpColorHex[j] + '\')">' } 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(\'#' + SpColorHex[j] + '\')">' } } } } colorTable = '<table border="1" cellspacing="0" cellpadding="0" style="text-align:center;cursor:pointer;border-collapse:collapse" bordercolor="000000" >' + '<tr><td colspan="21"><span style="float:right;margin-right:5px;cursor:pointer;" onclick="colorclose()">×关闭</span><span style="float:right;margin-right:5px;cursor:pointer;" onclick="defaultColor()">默认颜色</span></td></tr>' + 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(colorValue) { //alert(colorValue); document.getElementById('color').value = colorValue; document.getElementById("colorpane").style.display = "none";}function defaultColor() { document.getElementById('color').value = ''; document.getElementById("colorpane").style.display = "none"; //alert("ok"); }function colorclose() { document.getElementById("colorpane").style.display = "none"; //alert("ok"); }function coloropen() { document.getElementById("colorpane").style.display = "";}window.onload = initcolor;</script> </p> <p><input type="text" name="color" id="color" onclick="coloropen(event)"/> </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>
相关文章推荐
- js颜色选择器修改版(兼容firefox,chrome)
- 兼容IE、firefox以及chrome的js获取时间(getFullYear)
- 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome-javascript技巧
- AJAX w3school 以及IE、Firefox、Chrome 的JS代码兼容注意事项
- JS控制图片翻转示例代码(兼容firefox,ie,chrome)
- js 获取页面高度和宽度兼容 ie firefox chrome等
- js判断上传文件的大小,及确认文件是否在本地存在,兼容firefox、chrome、ie等浏览器
- 解决JS:window.close()在Firefox下的不能关闭的问题,兼容IE/Firefox/Chrome
- js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
- js鼠标滚轮事件详解(全兼容ie、chrome、firefox)实现图片缩放
- 进化版百度Popup.js弹出框|拖拽小框架发布,兼容IE6/7/8,Firefox,Chrome【附下载】
- JS导出excel 兼容ie、chrome、firefox
- js监听浏览器,关闭,刷新(兼容IE6+,Firefox,Chrome,Safari)
- IE、Firefox、Chrome 的JS代码兼容注意事项
- JS实现pasteHTML兼容ie,firefox,chrome的方法
- JS直接导出excel 兼容ie、chrome、firefox
- js颜色选择器代码[firefox不支持]
- JS在IE,firefox,chrome中的兼容问题
- js 获取页面高度和宽度兼容 ie firefox chrome等
- js监听浏览器,关闭,刷新(兼容IE6+,Firefox,Chrome,Safari)