`
lhy5201314
  • 浏览: 122704 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

支持IE、firefox的颜色选择器

IEFirefoxJSP 
阅读更多
自己整理的支持IE、firefox的颜色选择器 

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
  <head>
 
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    

	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" language="javascript"> 
function trim(s)   
{   
    try  
    {   
        return s.replace(/^\s+|\s+$/g,"");   
    }   
    catch(e)   
    {   
        return s;   
    }   
}

function rgb(red,green,blue) {
var hexarray= new Array(256);
hexarray[0]="00"; hexarray[1]="01"; hexarray[2]="02";
hexarray[3]="03"; hexarray[4]="04"; hexarray[5]="05";
hexarray[6]="06"; hexarray[7]="07"; hexarray[8]="08";
hexarray[9]="09"; hexarray[10]="0A"; hexarray[11]="0B"; 
hexarray[12]="0C"; hexarray[13]="0D"; hexarray[14]="0E";
hexarray[15]="0F"; hexarray[16]="10"; hexarray[17]="11";
hexarray[18]="12"; hexarray[19]="13"; hexarray[20]="14";
hexarray[21]="15"; hexarray[22]="16"; hexarray[23]="17";
hexarray[24]="18"; hexarray[25]="19"; hexarray[26]="1A";
hexarray[27]="1B"; hexarray[28]="1C"; hexarray[29]="1D";
hexarray[30]="1E"; hexarray[31]="1F"; hexarray[32]="20";
hexarray[33]="21"; hexarray[34]="22"; hexarray[35]="23";
hexarray[36]="24"; hexarray[37]="25"; hexarray[38]="26";
hexarray[39]="27"; hexarray[40]="28"; hexarray[41]="29"; 
hexarray[42]="2A"; hexarray[43]="2B"; hexarray[44]="2C";
hexarray[45]="2D"; hexarray[46]="2E"; hexarray[47]="2F";
hexarray[48]="30"; hexarray[49]="31"; hexarray[50]="32";
hexarray[51]="33"; hexarray[52]="34"; hexarray[53]="35";
hexarray[54]="36"; hexarray[55]="37"; hexarray[56]="38";
hexarray[57]="39"; hexarray[58]="3A"; hexarray[59]="3B";
hexarray[60]="3C"; hexarray[61]="3D"; hexarray[62]="3E";
hexarray[63]="3F"; hexarray[64]="40"; hexarray[65]="41";
hexarray[66]="42"; hexarray[67]="43"; hexarray[68]="44";
hexarray[69]="45"; hexarray[70]="46"; hexarray[71]="47";
hexarray[72]="48"; hexarray[73]="49"; hexarray[74]="4A";
hexarray[75]="4B"; hexarray[76]="4C"; hexarray[77]="4D";
hexarray[78]="4E"; hexarray[79]="4F"; hexarray[80]="50";
hexarray[81]="51"; hexarray[82]="52"; hexarray[83]="53";
hexarray[84]="54"; hexarray[85]="55"; hexarray[86]="56";
hexarray[87]="57"; hexarray[88]="58"; hexarray[89]="59";
hexarray[90]="5A"; hexarray[91]="5B"; hexarray[92]="5C";
hexarray[93]="5D"; hexarray[94]="5E"; hexarray[95]="6F";
hexarray[96]="60"; hexarray[97]="61"; hexarray[98]="62";
hexarray[99]="63"; hexarray[100]="64"; hexarray[101]="65";
hexarray[102]="66"; hexarray[103]="67"; hexarray[104]="68";
hexarray[105]="69"; hexarray[106]="6A"; hexarray[107]="6B";
hexarray[108]="6C"; hexarray[109]="6D"; hexarray[110]="6E";
hexarray[111]="6F"; hexarray[112]="70"; hexarray[113]="71";
hexarray[114]="72"; hexarray[115]="73"; hexarray[116]="74";
hexarray[117]="75"; hexarray[118]="76"; hexarray[119]="77";
hexarray[120]="78"; hexarray[121]="79"; hexarray[122]="7A";
hexarray[123]="7B"; hexarray[124]="7C"; hexarray[125]="7D";
hexarray[126]="7E"; hexarray[127]="7F"; hexarray[128]="80";
hexarray[129]="81"; hexarray[130]="82"; hexarray[131]="83";
hexarray[132]="84"; hexarray[133]="85"; hexarray[134]="86";
hexarray[135]="87"; hexarray[136]="88"; hexarray[137]="89";
hexarray[138]="8A"; hexarray[139]="8B"; hexarray[140]="8C";
hexarray[141]="8D"; hexarray[142]="8E"; hexarray[143]="8F";
hexarray[144]="90"; hexarray[145]="91"; hexarray[146]="92"; 
hexarray[147]="93"; hexarray[148]="94"; hexarray[149]="95";
hexarray[150]="96"; hexarray[151]="97"; hexarray[152]="98";
hexarray[153]="99"; hexarray[154]="9A"; hexarray[155]="9B";
hexarray[156]="9C"; hexarray[157]="9D"; hexarray[158]="9E";
hexarray[159]="9F"; hexarray[160]="A0"; hexarray[161]="A1";
hexarray[162]="A2"; hexarray[163]="A3"; hexarray[164]="A4";
hexarray[165]="A5"; hexarray[166]="A6"; hexarray[167]="A7";
hexarray[168]="A8"; hexarray[169]="A9"; hexarray[170]="AA";
hexarray[171]="AB"; hexarray[172]="AC"; hexarray[173]="AD";
hexarray[174]="AE"; hexarray[175]="AF"; hexarray[176]="B0";
hexarray[177]="B1"; hexarray[178]="B2"; hexarray[179]="B3";
hexarray[180]="B4"; hexarray[181]="B5"; hexarray[182]="B6";
hexarray[183]="B7"; hexarray[184]="B8"; hexarray[185]="B9";
hexarray[186]="BA"; hexarray[187]="BB"; hexarray[188]="BC";
hexarray[189]="BD"; hexarray[190]="BE"; hexarray[191]="BF";
hexarray[192]="C0"; hexarray[193]="C1"; hexarray[194]="C2";
hexarray[195]="C3"; hexarray[196]="C4"; hexarray[197]="C5";
hexarray[198]="C6"; hexarray[199]="C7"; hexarray[200]="C8";
hexarray[201]="C9"; hexarray[202]="CA"; hexarray[203]="CB";
hexarray[204]="CC"; hexarray[205]="CD"; hexarray[206]="CE";
hexarray[207]="CF"; hexarray[208]="D0"; hexarray[209]="D1";
hexarray[210]="D2"; hexarray[211]="D3"; hexarray[212]="D4";
hexarray[213]="D5"; hexarray[214]="D6"; hexarray[215]="D7";
hexarray[216]="D8"; hexarray[217]="D9"; hexarray[218]="DA";
hexarray[219]="DB"; hexarray[220]="DC"; hexarray[221]="DD";
hexarray[222]="DE"; hexarray[223]="DF"; hexarray[224]="E0";
hexarray[225]="E1"; hexarray[226]="E2"; hexarray[227]="E3";
hexarray[228]="E4"; hexarray[229]="E5"; hexarray[230]="E6";
hexarray[231]="E7"; hexarray[232]="E8"; hexarray[233]="E9";
hexarray[234]="EA"; hexarray[235]="EB"; hexarray[236]="EC";
hexarray[237]="ED"; hexarray[238]="EE"; hexarray[239]="EF";
hexarray[240]="F0"; hexarray[241]="F1"; hexarray[242]="F2";
hexarray[243]="F3"; hexarray[244]="F4"; hexarray[245]="F5";
hexarray[246]="F6"; hexarray[247]="F7"; hexarray[248]="F8";
hexarray[249]="F9"; hexarray[250]="FA"; hexarray[251]="FB";
hexarray[252]="FC"; hexarray[253]="FD"; hexarray[254]="FE"; 
hexarray[255]="FF";
hexcode = "#" + hexarray[red] + hexarray[green] + hexarray[blue];
return hexcode;
}
<!-- 
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;">12</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; 
document.getElementById("colorpane").style.left = current_x + "px"; 
document.getElementById("colorpane").style.top = current_y + "px"; 
} 
function doclick(obj){ 
	var rgbcolor = "";
	if(obj.length>7){
		rgbcolor=rgb(trim(obj.substring(obj.indexOf('(')+1,obj.indexOf(')')).split(',')[0]),trim(obj.substring(obj.indexOf('(')+1,obj.indexOf(')')).split(',')[1]),trim(obj.substring(obj.indexOf('(')+1,obj.indexOf(')')).split(',')[2]));
		document.getElementById("inputcolor").value=rgbcolor;
		document.getElementById("inputcolor").style.backgroundColor=rgbcolor;
	}else{
		rgbcolor=obj;
		document.getElementById("inputcolor").value=rgbcolor;
		document.getElementById("inputcolor").style.backgroundColor=rgbcolor;
	}
	document.getElementById("colorpane").style.display = "none"; 
}
function resetColor(){
	document.getElementById("inputcolor").value="";
	document.getElementById("inputcolor").style.backgroundColor="";
} 
function colorclose(){ 
document.getElementById("colorpane").style.display = "none"; 
} 
function coloropen(){ 
document.getElementById("colorpane").style.display = ""; 
} 
</script>
  </head>
  <body onload="resetColor();initcolor()">
   <input name="color" type="text" onclick="coloropen(event)" id="inputcolor" readonly/>
   <input name="reset" type="button" value="清空" onclick="resetColor();">
   <div id="colorpane" style="position:absolute;z-index:999;display:none"></div>
    </body>
</html>
分享到：
| JSP中用回车监听按钮事件(兼容火狐 IE)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js颜色选择器 支持ie；firefox浏览器

    js颜色选择器 支持ie；firefox浏览器 很不错的 很小巧 可以用于后台中对标题颜色的控制

    颜色选择器，兼容各大主流浏览器

    在网页开发中，色彩选取是不可或缺的一个功能，尤其对于设计师和开发者来说，提供一个直观、易用的颜色选择器能够极大地提升用户体验。标题“颜色选择器，兼容各大主流浏览器”所指的，就是一个JavaScript编写的颜色...

    用jquery写的颜色选择器

    以上代码展示了如何使用jQuery创建一个基本的颜色选择器，并确保在IE6、Firefox和Chrome等主流浏览器中正常工作。实际上，你可以根据项目需求进一步扩展这个功能，比如添加颜色历史记录、保存和加载颜色、或者提供更...

    js颜色选择器

    10. **跨浏览器兼容性**：由于浏览器之间的差异，开发者需要注意确保颜色选择器在主流浏览器（如Chrome、Firefox、Safari、Edge和IE）中都能正常运行。 11. **性能优化**：颜色选择器可能会涉及到大量的DOM操作，...

    滤镜问题-FireFox火狐浏览器与IE的对比分析

    ### 滤镜问题-FireFox火狐浏览器与IE的对比分析 在Web开发领域，浏览器兼容性一直是开发者关注的重点之一。特别是在早期的Web技术发展中，不同浏览器对标准的支持程度存在较大差异，导致了多种特有的样式和效果实现...

    IE火狐不同点集锦

    Firefox则不支持此类滤镜，需要使用CSS3的透明度属性如`opacity`或`rgba`颜色模型来实现类似效果。 #### 2. 内容选择禁用 IE中，可以通过JavaScript阻止用户选择网页内容，代码如下： ```javascript obj....

    JS颜色选择器，2个例子

    在网页开发中，JavaScript（JS）常常用于增强用户体验，其中之一就是实现颜色选择器的功能。颜色选择器允许用户在网页上直观地选取颜色，这在设计、绘画或配置界面色彩的场景下尤其有用。本篇文章将深入探讨两个...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    2. **选择器Hack**：利用某些浏览器特有的选择器进行Hack，例如`_property`在IE6和IE7下生效，而`*property`则在IE6下生效。 3. **CSS注释Hack**：在CSS注释中包含特定字符序列，让某些浏览器忽略后面的规则。例如...

    颜色选择器 Color Picker,IE,Firefox,Opera,Safar

    它支持多种浏览器，包括IE、Firefox、Opera和Safari。 2. **dematte.at/colorPicker** - 另一个颜色选择器，可能提供了不同风格和功能的色彩选取组件，帮助开发者增强用户体验。 3. **...

    JS日历控件 (兼容IE firefox) 可选择时间

    本资源提供了一个兼容Internet Explorer（IE）和Firefox浏览器的JS日历控件，允许用户方便地选择日期和时间。以下是关于这个JS日历控件的一些关键知识点： 1. **跨浏览器兼容性**：此控件考虑到了不同的浏览器间...

    js ie firefox 日历控件多多

    2. **浏览器兼容性**：IE和Firefox是两个主要的浏览器，但它们对JavaScript的支持程度略有差异。例如，旧版本的IE可能不支持某些现代JavaScript特性。因此，开发跨浏览器的日历控件时，需要考虑到这些差异，通常通过...

    jquery颜色选择插件Spectrum.zip

    Spectrum 插件兼容现代浏览器，包括Chrome、Firefox、Safari、Edge和IE9+。同时，它还支持响应式设计，可以在移动设备上正常使用。 总的来说，jQuery Spectrum 颜色选择插件以其高度可定制性和易用性，成为网页开发...

    简单CSShack：区分IE6、IE7、IE8、Firefox、Opera().pdf

    此外，下划线`_`是IE6独有的，IE7和Firefox都不支持。因此可以利用`_`来单独设置IE6的样式。 例如，以下代码可用于区分IE6、IE7和Firefox： ```css background:orange; /* FF */ * background: green; /* IE7 */ _...

    日期控件（支持火狐和IE）

    在给定的标题“日期控件（支持火狐和IE）”中，我们可以理解到这是一个专为Firefox和Internet Explorer（IE）浏览器设计的日期选择器。在过去的Web开发中，由于浏览器之间的兼容性问题，实现跨浏览器的日期控件是一...

    CSS3颜色渐变选择器jQuery代码

    5. **兼容性处理**：考虑到浏览器之间的差异，插件可能包含了对不同浏览器（如Firefox、Chrome、Safari、IE）的前缀和语法适配，确保在多数环境下都能正常工作。 在提供的压缩包中，有以下几个关键文件： - `index....

    兼容ie,Firefox的文件上传

    标题 "兼容ie,Firefox的文件上传" 涉及的核心知识点是实现跨浏览器的文件上传功能，特别是针对Internet Explorer（IE）和Firefox这两个主流浏览器的兼容性问题。在Web开发中，由于不同浏览器对HTML、CSS和JavaScript...

    CSS选择器详细介绍

    例如，IE 不支持伪类选择器，而 Firefox 支持伪类选择器。同时，某些浏览器也可能对某些选择器的支持不完全。 CSS 选择器是 CSS 中最基本也是最重要的概念之一，它们用来选择 HTML 元素并应用样式。掌握 CSS 选择器...

    js颜色选择器代码[firefox不支持]

    在提供的代码中，我们看到两种实现颜色选择器的方法，但需要注意的是，这些方法可能在Firefox浏览器中不受支持，因为它依赖于ActiveX对象，这是Internet Explorer特有的技术。 **颜色选择器实现方式1** 首先，代码...

Magicbox
Global site tag (gtag.js) - Google Analytics