JAVASCRIPT实现颜色对话框

原创 2005年05月16日 10:48:00

<HTML>
<HEAD>
<TITLE>Choose Color</TITLE>
<meta http-equiv="content-type" content="text/html; charset=gb2312">

<script language="javascript">
var SelRGB = '#000000';
var DrRGB = '';
var SelGRAY = '120';

var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');

function ToHex(n)
{ var h, l;

 n = Math.round(n);
 l = n % 16;
 h = Math.floor((n / 16)) % 16;
 return (hexch[h] + hexch[l]);
}

function DoColor(c, l)
{ var r, g, b;

  r = '0x' + c.substring(1, 3);
  g = '0x' + c.substring(3, 5);
  b = '0x' + c.substring(5, 7);
 
  if(l > 120)
  {
    l = l - 120;

    r = (r * (120 - l) + 255 * l) / 120;
    g = (g * (120 - l) + 255 * l) / 120;
    b = (b * (120 - l) + 255 * l) / 120;
  }else
  {
    r = (r * l) / 120;
    g = (g * l) / 120;
    b = (b * l) / 120;
  }

  return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}

function EndColor()
{ var i;

  if(DrRGB != SelRGB)
  {
    DrRGB = SelRGB;
    for(i = 0; i <= 30; i ++)
      GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
  }

  SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
  ShowColor.bgColor = SelColor.value;
}
</script>

<script language="javascript" for="ColorTable" event="onclick">
  SelRGB = event.srcElement.bgColor;
  EndColor();
</script>

<script language="javascript" for="ColorTable" event="onmouseover">
  RGB.innerText = event.srcElement.bgColor.toUpperCase();
  EndColor();
</script>

<script language="javascript" for="ColorTable" event="onmouseout">
  RGB.innerText = SelRGB;
  EndColor();
</script>

<script language="javascript" for="GrayTable" event="onclick">
  SelGRAY = event.srcElement.title;
  EndColor();
</script>

<script language="javascript" for="GrayTable" event="onmouseover">
  GRAY.innerText = event.srcElement.title;
  EndColor();
</script>

<script language="javascript" for="GrayTable" event="onmouseout">
  GRAY.innerText = SelGRAY;
  EndColor();
</script>

<script language="javascript" for="Ok" event="onclick">
  window.returnValue = SelColor.value;
  window.close();
</script>

</head>

<body bgcolor="menu">

<div align="center"><center><table border="0" cellspacing="10" cellpadding="0"><tr><td>
<table ID="ColorTable" border="0" cellspacing="0" cellpadding="0" style='cursor:hand'>
<script language="javascript">
function wc(r, g, b, n)
{
 r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
 g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
 b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;

 document.write('<td bgcolor=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);

  for(i = 0; i < 16; i ++)
  {
     document.write('<TR>');
     for(j = 0; j < 30; j ++)
     {
      n1 = j % 5;
      n2 = Math.floor(j / 5) * 3;
      n3 = n2 + 3;

      wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
       (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
       (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
     }

     document.writeln('</tr>');
  }
</script>
</table></td><td>
<table id="GrayTable" border="0" cellspacing="0" cellpadding="0" style='cursor:hand'>
<script language="javascript">
  for(i = 255; i >= 0; i -= 8.5)
     document.write('<tr bgcolor=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><td title=' + Math.floor(i * 16 / 17) + ' height=4 width=20></td></tr>');
</script>
</table>
</td></tr>
</table>
</center></div>

<div align="center"><center>
<table border="0" cellspacing="10" cellpadding="0" width="100%">
<tr><td rowspan="2" align="center" width=70>
<table ID="ShowColor" bgcolor="#000000" border="1" width="50" height="40" cellspacing="0" cellpadding="0">
<tr><td></td></tr>
</table>
</td>
<td rowspan="2">Base : <span id="RGB">#000000</span><br>
Bright: <span id="GRAY">120</span><br>
Code : <input type="text" size="7" ID="SelColor" value="#000000"></td>
<td width="50"><button id="Ok" type="submit">OK</button></td></tr>
<tr><td width="50"><button onclick="window.close();">Cancel</button></td></tr>
</table></center></div>

</body>  
</html>

java使用颜色对话框

// ColorPicker.java// A quick test of the JColorChooser dialog//import java.awt.*;import java.awt.ev...
  • chenzhanhai
  • chenzhanhai
  • 2010年12月21日 23:13
  • 1045

VC 改变对话框某一区域颜色

1. 在OnPaint中添加代码: void CXXXDlg::OnPaint()  { if (IsIconic()) { CPaintDC dc(this); // device con...
  • a379039233
  • a379039233
  • 2015年04月09日 18:50
  • 980

JS对话框框架

基本的对话框窗口是一个定位于视区中的覆盖层,同时通过一个 iframe 与页面内容分隔开(就像 select 元素)。它由一个标题栏和一个内容区域组成,且可以移动,调整尺寸,默认可通过 'x' 图标关...
  • byxdaz
  • byxdaz
  • 2017年03月03日 23:43
  • 1208

JavaScript实现模态对话框

  今天哈尔滨今日图灵学校的朋友谈起js实现模态窗口,看俺是孤陋寡闻,遂演示了一番,原来不就是弹窗对话框之类的么!!javascript不是用window.open实现  么,刚发表一番言论 发现不对...
  • royal_coffee
  • royal_coffee
  • 2008年04月21日 08:28
  • 7328

QT5基本对话框 标准颜色对话框

QT5基本对话框  标准颜色对话框 实现的效果如下图所示: 新建一个Qt Widget Application,项目名为:myDialog,基类选择QDialog,类名保持Dialog不变,取消“创...
  • chenjianqi0502
  • chenjianqi0502
  • 2016年12月23日 16:26
  • 735

VC++修改对话框颜色方法

在软件开发中,出于界面的美观或是别的目的我们需要修改对话框的颜色,这时我们可以通过如下方法来达到目的。 注:本例使用VC++2010测试, 以下第一种方法不适合该版本的VC++库。...
  • xbmoxia
  • xbmoxia
  • 2014年09月10日 16:48
  • 1396

安卓Andriod使用入门(二十)【颜色对话框】

伟大的事业不是靠力气、速度和身体的敏捷完成的,而是靠性格、意志和知识的力量完成的。MainActivity.java代码:package siso.colordialog;import android...
  • WuLex
  • WuLex
  • 2016年11月22日 23:30
  • 2283

【Qt】标准颜色对话框类

标准颜色对话框类是在标准文件对话框的基础之上添加一些布局实现的,效果如下: click "颜色标准对话框实例" chose the one you love: add the code...
  • LDan508
  • LDan508
  • 2016年05月12日 23:05
  • 3015

QT学习 之 对话框 (三) 标准颜色对话框

点击打开链接QColorDialog类的文档 QRgb: 在Qt中,这个颜色可以这样表示:QRgb red = qRgba(255, 0, 0, 255),由于图片不是透明的,也可以如下简单表示Q...
  • u013007900
  • u013007900
  • 2015年01月26日 16:16
  • 1926

C# 字体对话框 & 颜色对话框

颜色对话框 ColorDialog为颜色对话框 属性: Color属性:用户选定的颜色 AnyColor属性:为true时显示所有可用的基本颜色 FullOpen属性:若为true,在对话框...
  • theturecolor123
  • theturecolor123
  • 2017年02月12日 15:13
  • 998
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JAVASCRIPT实现颜色对话框
举报原因:
原因补充:

(最多只允许输入30个字)