js颜色选择器修改版(兼容firefox,chrome)
2015-11-03 10:40
483 查看
点击input输入框弹出颜色选择器,然后选择自己喜欢的颜色.本JS类兼容firefox和chrome.
前台代码:
JS颜色选择器类:
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSLibraryDemo.aspx.cs" Inherits="JSLibraryDemo" %> <!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 runat="server"> <title>JS类库测试</title> <script type="text/javascript" src="JSLibrary/ColorSelector.js"></script> <script type="text/javascript"> </script> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="color" onclick="coloropen(event)" /> <div id="colorpane" style="position:absolute;z-index:999;display:none;"></div> <span id="inputcolor"></span> </div> </form> </body> </html>
JS颜色选择器类:
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(\'#' + 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 = '#FFFFFF' document.getElementById("colorpane").style.display = "none"; } function colorclose() { document.getElementById("colorpane").style.display = "none"; } function coloropen() { document.getElementById("colorpane").style.display = ""; } window.onload = initcolor;
相关文章推荐
- js中的preventDefault与stopPropagation详解
- js复制到剪切板
- javascript 实现继承
- js正则表达式练习
- Extjs的grid数据加载之后默认选择第一行数据
- js编写的语法高亮引擎
- 禁止表单按回车触发提交事件
- 阿里JStorm
- js数组依据下标删除元素
- 【Miaov】JS5-函数传参
- 演示JSON-LIB小工具
- JS - IE中没有console定义
- JavaScript Array 对象
- 常用的JavaScript正则表达式
- 基于JavaScript怎么实现让歌词滚动播放
- JavaScript核心
- javascript中concat()、slice()、substr()和substring()字符串方法
- JavaScript生成GUID的算法
- Javascript设计模式理论与编程实战之简单工厂模式
- JS实现网页标题随机显示名人名言的方法