posts - 77, comments - 54, trackbacks - 0, articles - 0
  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

实现选择需要的颜色实现方法!

Posted on 2006-10-11 12:52 东人EP 阅读(639) 评论(0)  编辑 收藏 引用 所属分类: .NETJavaScript
实现选择需要的颜色实现方法

显示调色板页面:
 1<html>
 2    <head>
 3        <title>调色板</title>
 4        <meta http-equiv="Content-Type" content="text/html; charset=gb2311">
 5        <script>
 6    var ColorHex=new Array('00','33','66','99','CC','FF')
 7    var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
 8    var current=null
 9
10    function intocolor()
11    {
12        var colorTable=''
13        for (i=0;i<2;i++)
14        {
15            for (j=0;j<6;j++)
16            {
17                colorTable=colorTable+'<tr height=12>'
18                colorTable=colorTable+'<td width=11 style="background-color:#000000">'
19                
20                if (i==0){
21                colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'}
 
22                else{
23                colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'}
 
24
25                
26                colorTable=colorTable+'<td width=11 style="background-color:#000000">'
27                for (k=0;k<3;k++)
28                {
29                    for (l=0;l<6;l++)
30                    {
31                        colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
32                    }

33                }

34            }

35        }

36        colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
37                +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
38                +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
39                +'<tr><td width="3"><td><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
40                +'<td width="3"><td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
41                +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
42                +colorTable+'</table>';          
43        colorpanel.innerHTML=colorTable
44    }

45
46    function doOver() 
47    {
48        if ((event.srcElement.tagName=="TD"&& (current!=event.srcElement)) {
49            if (current!=null){current.style.backgroundColor = current._background}    
50            event.srcElement._background = event.srcElement.style.backgroundColor
51            DisColor.style.backgroundColor = event.srcElement.style.backgroundColor
52            HexColor.value = event.srcElement.style.backgroundColor
53            //event.srcElement.style.backgroundColor = "white"
54            current = event.srcElement
55        }

56    }

57
58    function doOut() {
59
60        if (current!=null) current.style.backgroundColor = current._background
61    }

62
63    function doclick(){
64        if (event.srcElement.tagName=="TD")
65        {
66            //alert("选取颜色: "+event.srcElement._background)
67            DisColor.style.backgroundColor = event.srcElement.style.backgroundColor;
68            HexColor.value = event.srcElement.style.backgroundColor;
69            window.returnValue = event.srcElement.style.backgroundColor;
70            window.close();
71            return event.srcElement._background;
72        }

73    }

74        
</script>
75    </head>
76    <body onload="intocolor()">
77        <div id="colorpanel" style="POSITION: absolute">
78        </div>    
79        
80    </body>
81</html>
82
调用调色板的ASPX页面:
 1<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.WebForm1" %>
 2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3<HTML>
 4    <HEAD>
 5        <TITLE>WebForm1</TITLE>
 6        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
 7        <meta content="C#" name="CODE_LANGUAGE">
 8        <meta content="JavaScript" name="vs_defaultClientScript">
 9        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10        <script language="javascript">
11            function getColor(obj)
12            {
13                if (window.showModalDialog)
14                {
15                    var sRtn;
16                    sRtn = showModalDialog("Color.htm","","help=no;status=no;center=yes;dialogWidth=275px;dialogHeight=203px");
17                    if ((sRtn!="")&&(sRtn!=null))
18                    {
19                        obj.value = sRtn;
20                        obj.style.backgroundColor = sRtn;
21                    }

22                }

23            }
        
24        
</script>
25    </HEAD>
26    <body MS_POSITIONING="GridLayout">
27        <form id="Form1" method="post" runat="server">
28            <div id="colorpanel" style="DISPLAY: none"></div>
29            <FONT face="宋体"></FONT>&nbsp;&nbsp;
30            <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 288px; POSITION: absolute; TOP: 160px"
31                runat="server"></asp:TextBox>
32            <INPUT style="Z-INDEX: 102; LEFT: 456px; POSITION: absolute; TOP: 160px" type="button" value="Button" onclick="getColor(document.all.TextBox1)">
33        </form>
34    </body>
35</HTML>
36
只有注册用户登录后才能发表评论。