JS实现的一个颜色选择框

jhlovett

浏览: 615699 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript J#XHTML HTML

<!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>
<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=null
function intocolor(){
var colorTable=''
for (i=0;i<2;i++){
for (j=0;j<6;j++){
colorTable=colorTable+'<tr height=12>'
colorTable=colorTable+'<td width=11 style="background-color:#000000">'
if (i==0){
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'} 
else{
colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'} 
colorTable=colorTable+'<td width=11 style="background-color:#000000">'
for (k=0;k<3;k++){
for (l=0;l<6;l++){
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
}
}
}
}
colorTable='<br/><br/><br/><br/><br/><br/><br/><br/><br/><table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'+'<tr height=30><td colspan=21 bgcolor=#cccccc>'+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'+'<tr><td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'+'<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>'+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'+colorTable+'</table>'; 
colorpanel.innerHTML=colorTable
}

//将颜色值字母大写
function doOver() {
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
if (current!=null){current.style.backgroundColor = current._background} 
event.srcElement._background = event.srcElement.style.backgroundColor
DisColor.style.backgroundColor = event.srcElement.style.backgroundColor
HexColor.value = event.srcElement.style.backgroundColor.toUpperCase();
event.srcElement.style.backgroundColor = "white"
current = event.srcElement
}
}

//将颜色值字母大写
function doOut() {
if (current!=null) current.style.backgroundColor = current._background.toUpperCase();
}

function doclick(){
if (event.srcElement.tagName == "TD")
{
var clr = event.srcElement._background;
clr = clr.toUpperCase(); //将颜色值大写
if (targetElement){
//给目标无件设置颜色值
targetElement.value = clr;
}
DisplayClrDlg(false);
return clr;
}
}
-->
</script>
</head>
<body>
<div id="colorpanel" style="position:absolute;display:none;width:253px;height:177px;"></div>
请点击文本框：<input type="text" size="8" alt="clrDlg" readonly>
<script type="text/javascript" language="javascript">
<!--
//应用颜色对话框必须注意两点：
//颜色对话框id : colorpanel 不能变
//触发颜色对话框显示的文本框（或其它）必须有alt 属性，且值为clrDlg（不能忽略大小写）
var targetElement = null; //接收颜色对话框返回值的元素
//当点下鼠标时，确定显示还是隐藏颜色对话框
//点击颜色对话框以外其它区域时，让对话框隐藏
//点击颜色对话框色区时，由doclick 函数来隐藏对话框

function OnDocumentClick(){
var srcElement = event.srcElement;
if (srcElement.alt == "clrDlg")
{
//显示颜色对话框
targetElement = event.srcElement;
DisplayClrDlg(true);
}
else{
//是否是在颜色对话框上点击的
while (srcElement && srcElement.id!="colorpanel"){
srcElement = srcElement.parentElement;
}
if (!srcElement){
//不是在颜色对话框上点击的
DisplayClrDlg(false);
}
}
}
//显示颜色对话框
//display 决定显示还是隐藏
//自动确定显示位置
function DisplayClrDlg(display){
var clrPanel = document.getElementById("colorpanel");
if (display){
var left = document.body.scrollLeft + event.clientX;
var top = document.body.scrollTop + event.clientY;
if (event.clientX+clrPanel.style.pixelWidth > document.body.clientWidth){
//对话框显示在鼠标右方时，会出现遮挡，将其显示在鼠标左方
left -= clrPanel.style.pixelWidth;
}
if (event.clientY+clrPanel.style.pixelHeight > document.body.clientHeight){
//对话框显示在鼠标下方时，会出现遮挡，将其显示在鼠标上方
top -= clrPanel.style.pixelHeight;
}
clrPanel.style.pixelLeft = left;
clrPanel.style.pixelTop = top;
clrPanel.style.display = "block";
}
else{
clrPanel.style.display = "none";
}
}
document.body.onclick = OnDocumentClick;
document.body.onload = intocolor;
//-->
</script>
</body>
</html>

分享到：

PHP建站不再难国外优秀开源PHP建站程序 ... | 给DropDownList的DataTextField属性绑定两 ...

2009-07-13 20:10
浏览 1650
评论(0)
查看更多

发表评论

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

相关推荐

基于javaweb的学生宿舍管理系统.zip(毕设&课设&实训&大作业&竞赛&项目): 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用，资源为网络商品（电子资料类）基于网络商品和电子资料商品的性质和特征不支持退款，质量优质，放心下载使用

最新更新！！国家农业龙头企业数量（2010-2022年）: ## 1、数据简介国家农业龙头企业数量主要指的是经过国家相关部门认定，并在农业产业化方面发挥重要引领作用的企业的总数。这些企业通常以农产品加工或流通为主业，通过各种利益联结机制与农户相联系，带动农户进入市场，实现农产品生产、加工、销售的有机结合和相互促进。数据名称：国家农业龙头企业数量数据年份：2010-2022年 ## 02、相关数据省份、年份、龙头企业数量。

基于struts2+spring+mybites的二手车交易信息网站(毕设&课设&实训&大作业&竞赛&项目): 这是一个二手车交易信息网站，用struts2+spring+mybites写的，数据库放在webContent目录下的。.zip项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用，资源为网络商品（电子资料类）基于网络商品和电子资料商品的性质和特征不支持退款

集工单统计、任务钩子、权限管理、灵活配置流程与模版等工单系统: 本系统是集工单统计、任务钩子、权限管理、灵活配置流程与模版等等于一身的开源工单系统，当然也可以称之为工作流引擎。致力于减少跨部门之间的沟通，自动任务的执行，提升工作效率与工作质量，减少不必要的工作量与人为出错率。

Qt5.12Linux+Win安装包-压缩分卷00（共10卷）: 第00卷，密码在对应的文章内。

Linux Mint-15.zip: 目录： linuxmint-15-cinnamon-dvd-32bit linuxmint-15-cinnamon-dvd-64bit linuxmint-15-kde-dvd-32bit linuxmint-15-kde-dvd-64bit linuxmint-15-mate-dvd-32bit linuxmint-15-mate-dvd-64bit linuxmint-15-xfce-dvd-32bit linuxmint-15-xfce-dvd-64bit 网盘文件永久链接

chromedriver-win32-135.0.7031.0(Canary).zip: chromedriver-win32-135.0.7031.0(Canary).zip

STM32开发：IIR带阻滤波器设计与实现，含巴特沃斯和切比雪夫滤波器MATLAB程序,STM32开发中IIR带阻滤波器的实现与巴特沃斯滤波器设计详解：附MATLAB程序,STM32开发 IIR带阻滤: STM32开发：IIR带阻滤波器设计与实现，含巴特沃斯和切比雪夫滤波器MATLAB程序,STM32开发中IIR带阻滤波器的实现与巴特沃斯滤波器设计详解：附MATLAB程序,STM32开发 IIR带阻滤波器 STM32实现IIR无限冲击响应带阻滤波器设计，巴特沃斯滤波器，代码工整，自编代码，注释详细，赠送巴特沃斯和切比雪夫IIR带阻滤波器MATLAB程序 ,STM32开发; IIR带阻滤波器; 无限冲击响应; 巴特沃斯滤波器; 自编代码; 注释详细; MATLAB程序,STM32中IIR带阻滤波器设计与实现

遵循HTTP协议，编写HTML生成器生成前端界面，完成简单的博客系统.zip（课设&实训&大作业&项目）: 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用，资源为网络商品（电子资料类）基于网络商品和电子资料商品的性质和特征不支持退款

基于ssh&acegi的简单b2c电子商务网站.zip(毕设&课设&实训&大作业&竞赛&项目): 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用，资源为网络商品（电子资料类）基于网络商品和电子资料商品的性质和特征不支持退款，质量优质，放心下载使用

纯电动汽车仿真研究：基于Matlab Simulink与Simscape的车辆模型动力性、经济性及续航里程分析,基于Matlab Simulink与Simscape的纯电动汽车动力、经济性及续航里程仿: 纯电动汽车仿真研究：基于Matlab Simulink与Simscape的车辆模型动力性、经济性及续航里程分析,基于Matlab Simulink与Simscape的纯电动汽车动力、经济性及续航里程仿真模型探究,纯电动汽车仿真、纯电动公交、纯电动客车、纯电动汽车动力性仿真、经济性仿真、续航里程仿真。模型包括电机、电池、车辆模型。有两种模型2选1： 1 完全用matlab simulink搭建的模型。 2用simscape搭建的车辆模型。 ,纯电动汽车仿真; 纯电动公交; 纯电动客车; 动力性仿真; 经济性仿真; 续航里程仿真; 模型（电机、电池、车辆模型）; MATLAB Simulink模型; Simscape车辆模型。,纯电动交通工具仿真模型研究：基于Matlab Simulink与Simscape的电池、电机及车辆性能分析

MATLAB代码：电转气P2G与碳捕集设备在热电联供综合能源系统中的优化调度模型研究：融入碳交易机制的非线性模型高效求解 ,MATLAB环境下结合P2G技术与碳捕集设备的综合能源系统优化调度模型，包括: MATLAB代码：电转气P2G与碳捕集设备在热电联供综合能源系统中的优化调度模型研究：融入碳交易机制的非线性模型高效求解。,MATLAB环境下结合P2G技术与碳捕集设备的综合能源系统优化调度模型，包括热电联产与低碳调度，借鉴碳交易机制实现高效求解。,MATLAB代码：考虑P2G和碳捕集设备的热电联供综合能源系统优化调度模型注意：店铺内有大量考虑碳交易代码，欢迎咨询关键词：碳捕集综合能源系统电转气P2G 热电联产低碳调度参考文档：《Modeling and Optimization of Combined Heat and Power with Power-to-Gas and Carbon Capture System in Integrated Energy System》完美复现仿真平台：MATLAB yalmip+gurobi 主要内容：代码主要做的是一个考虑电转气P2G和碳捕集设备的热电联供综合能源系统优化调度模型，模型耦合CHP热电联产单元、电转气单元以及碳捕集单元，并重点考虑了碳交易机制，建立了综合能源系统运行优化模型，模型为非线性模型，采用yalmip

课程设计二手商城基于springboot后台管理.zip（课设&实训&大作业&项目）: 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用，资源为网络商品（电子资料类）基于网络商品和电子资料商品的性质和特征不支持退款，质量优质，放心下载使用

19考试真题最近的t37.txt: 19考试真题最近的t37.txt

（参考项目）MATLAB交通道路标识识别.zip: MATLAB交通标志识别系统可以通过图像处理和机器学习技术来识别道路上的不同交通标志。这个系统可以通过以下步骤来实现： 1. **数据收集**：收集具有不同交通标志的图像作为训练集，可以使用公开的交通标志数据集或者自己创建一个数据集。 2. **图像预处理**：对采集到的图像进行预处理，比如去噪、调整大小、灰度化等操作，以便更好地进行特征提取。 3. **特征提取**：从预处理后的图像中提取特征，例如颜色、形状、纹理等特征，以便训练分类器。 4. **分类器训练**：使用机器学习算法（如支持向量机、人工神经网络等）对提取的特征进行训练，以建立交通标志的分类模型。 5. **标志识别**：使用训练好的分类器对新的图像进行识别，并输出识别结果。 MATLAB提供了丰富的图像处理工具箱和机器学习工具箱，可以帮助实现交通标志识别系统。可以使用MATLAB编写代码来处理图像、提取特征、训练分类器和进行识别。同时，也可以借助深度学习工具箱来构建卷积神经网络（CNN）等深度学习模型进行交通标志的识别。需要注意的是，在实际应用中，还需要考虑系统的实时性、准确性和稳定性等因素，以确保该系统在不同场景下能够有效地识别交通标志。

双有源桥扩展技术：100kHz高频率、最小电流应力优化的3kw功率开关控制系统,双有源桥扩展技术：100kHz高频率、375-48V宽电压范围下的3kw功率控制与优化,双有源桥扩展移相控制开关频率: 双有源桥扩展技术：100kHz高频率、最小电流应力优化的3kw功率开关控制系统,双有源桥扩展技术：100kHz高频率、375-48V宽电压范围下的3kw功率控制与优化,双有源桥扩展移相控制开关频率100k，375-48V，功率3kw 控制方式为最小电流应力优化控制参数可定制 ,双有源桥;扩展移相控制;开关频率100k;功率3kw;最小电流应力优化控制;参数可定制,双桥移相控制，最小电流应力优化——100k开关频率功率控制技术

基于粒子群算法的IEEE30节点输电网最优潮流研究：以系统发电成本最小化为目标的二次函数关系优化求解,基于粒子群算法的输电网最优潮流控制研究：以IEEE30节点系统为例，探讨发电成本最小化及机组出力优: 基于粒子群算法的IEEE30节点输电网最优潮流研究：以系统发电成本最小化为目标的二次函数关系优化求解,基于粒子群算法的输电网最优潮流控制研究：以IEEE30节点系统为例，探讨发电成本最小化及机组出力优化,基于粒子群算法的最优潮流以IEEE30节点的输电网为研究对象以系统发电成本最小为目标函数以机组出力为优化变量其中出力与成本的关系是经典的二次函数关系通过优化求解得到最佳机组出力 ,最优潮流;粒子群算法;IEEE30节点输电网;系统发电成本;机组出力优化;二次函数关系;优化求解。,基于粒子群算法的IEEE30节点输电网最优潮流研究：成本最小化与机组出力优化

Abaqus管中管系统深水管非线性动力分析：Tube-to-Tube ITT单元的应用研究,Abaqus软件在管中管系统深水管非线性动力分析中的应用：基于Tube-to-tube ITT单元的数值模拟: Abaqus管中管系统深水管非线性动力分析：Tube-to-Tube ITT单元的应用研究,Abaqus软件在管中管系统深水管非线性动力分析中的应用：基于Tube-to-tube ITT单元的数值模拟研究,abaqus 管中管系统深水管非线性动力分析 Tube-to-tube ITT单元 ,Abaqus; 管中管系统; 深水管非线性动力分析; ITT单元; 节点分析; 仿真建模。,Abaqus深水管非线性动力分析中管中管系统的ITT单元应用

springboot在线知识管理平台类智慧交通调度平台源码+论文+视频1.zip: springboot在线知识管理平台类智慧交通调度平台源码+论文+视频1

punkt包，加tokenizers路径: punkt包

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现的一个颜色选择框

评论

发表评论

相关推荐

简单选项卡制作方式

字体放大效果，字体[大][中][小]

JS中保留两位小数

JS中String,Date,Math常用函数

eval，confirm,alert,prompt函数

从零开始学习jQuery(剧场版) 你必须知道的javascript

深入浅出JSON

数据类型和Json格式

防止网页被嵌入框架的代码

学习javascrip闭包 (closure)

花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight

document.write()和document.writeln()的区别

几个常用的小函数(检查是否为数字,否为电话号码,num是否是负数,检查是否为日期...)

为什么二月的天数比其他月少？

iframe自适应高度

document.body和document.documentElement的区别

从父页面读取和操作iframe中内容方法

JsTAB选项卡示例集合(二)

Js Tab选项卡示例集合

Js事件列表

最近访客更多访客>>