`

JS实现的一个颜色选择框

JavaScriptJ#XHTMLHTML 
阅读更多 
<!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>

 

分享到：
| 给DropDownList的DataTextField属性绑定两 ...
评论
发表评论

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

相关推荐

    js颜色选择器源码，用于网站颜色选择框

    这个压缩包包含的就是这样的一个源码实现，适用于网站的颜色选择框。在网页设计中，颜色选择器通常是一个图形用户界面，允许用户通过不同的方式查看和选择颜色，如调色板、颜色滑块或输入十六进制颜色代码。 1. **...

    个性选择框 个性选择框

    2. **一致性**：在同一个应用或网站中，所有个性选择框应保持一致的风格，以便用户可以快速适应并预测其行为。 3. **可访问性**：考虑到无障碍设计，个性选择框应该兼容屏幕阅读器和其他辅助技术，确保所有用户都能...

    Javascript左右选择框

    在这个"Javascript左右选择框"的教程中，我们将深入探讨其背后的实现原理和相关技术。 首先，我们要理解这个经典Demo的基本结构。一个基本的左右选择框由两部分组成：左侧的可选列表和右侧的已选列表。`index.html`...

    6个Web前端纯CSS3实现的单多选选择框（四）

    例如，当用户点击选择框时，我们可以设置一个平滑的颜色变化或大小变换动画，提升用户体验。 5. **响应式设计**： 针对不同设备和屏幕尺寸，使用媒体查询(`media queries`)可以确保选择框在移动端也具有良好的...

    html5 多种日期选择框

    本文将深入探讨HTML5中的日期输入类型、JavaScript日期对象以及如何通过CSS和JS实现模拟手机APP日期选择框的多种效果。 首先，HTML5新增了一个`&lt;input&gt;`类型的日期选择器，其type属性为`date`。例如： ```html ``...

    js实现的简易编辑框

    这个“js实现的简易编辑框”项目显然旨在为初学者提供一个直观的起点，让他们能够快速掌握基本的JavaScript和HTML交互技术。下面我们将深入探讨这个编辑框的实现原理、关键技术和可能涉及的知识点。 首先，我们要...

    6个Web前端纯CSS3实现的单多选选择框（六）

    jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果，可以与CSS3结合使用，为选择框添加更复杂的交互性。 在文件名称列表中，我们只有一个文件名“checkbox”，这可能是一个包含所有相关CSS3...

    jquery 左右选择框

    - 通过CSS控制选择框的外观，如宽度、颜色、边框等。 - 使用浮动或Flexbox布局使选项左右分布。 5. **文件解析**： - "jquery角色左右选择框.htm"可能是实现这个功能的HTML页面，展示了组件的实际应用。 - ...

    jquery 实现下拉选择框方便好看的选择样式

    在网页开发中，下拉选择框（Dropdown Select）是一种常见的用户界面元素，用于提供一系列可选项供用户选择。...通过深入理解和灵活运用，开发者可以轻松地在自己的项目中实现符合设计要求的下拉选择框。

    js 事件触发颜色选项框,选择颜色

    根据给定的信息，本文将详细解析如何利用JavaScript创建一个颜色选项框，并通过事件触发来实现颜色选择的功能。本文将从CSS样式定义、HTML结构搭建、JavaScript事件处理三个方面进行阐述。 ### 一、CSS样式定义 在...

    js实现警告框消息框和确认框特效.zip

    总之，"js实现警告框消息框和确认框特效.zip"是一个旨在提升网页交互体验的工具，通过x0popup.js，开发者可以轻松创建符合设计风格的弹出对话框，增强网站或应用的用户体验。使用此库，你可以自定义对话框的视觉元素...

    css实现个性化select 下拉选择框(3种风格)

    在本主题中，我们将探讨如何使用CSS实现三种不同的下拉选择框（select）风格：苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框： 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格，...

    Choicesjs一个JS可定制的选择框文本输入插件

    Choices.js 是一个强大的JavaScript库，专门用于创建可高度定制的选择框和文本输入插件。它为开发者提供了丰富的自定义选项，使得在Web应用中构建功能丰富、交互性强的表单元素变得轻而易举。这个插件尤其适用于那些...

    带搜索的国际区号选择框.zip

    综上所述，"带搜索的国际区号选择框"是一个涉及前端核心技术的实用组件，包括JavaScript的事件处理、DOM操作、AJAX异步请求，以及与用户交互相关的搜索算法和用户体验设计。对于前端开发者来说，理解并掌握这些技术...

    仿淘宝产品选择框.、点击出现选择框

    在IT行业中，构建一个“仿淘宝产品选择框”是一个常见的前端开发任务，目的是提供用户友好的界面，使得用户能够方便地选择商品的属性，如数量、款式等。这个功能的实现涉及到了网页交互设计、HTML、CSS以及...

    6个Web前端纯CSS3实现的单多选选择框（二）

    总之，纯CSS3实现的Web前端单多选选择框是前端开发中的一个重要技能，它不仅提升了界面的视觉表现，也优化了用户的交互体验。通过熟练掌握上述知识点，你可以在你的项目中创造出独一无二的选择框设计。

    JS实现简单实用的自动动态tips提示信息框(小的气泡框)效果

    以上代码示例展示了如何使用JavaScript实现一个基本的动态tips提示信息框。你可以根据实际需求调整样式、位置计算和事件处理。如果你想要更复杂的功能，例如动画效果或者自定义触发事件，可以进一步扩展这个基础框架...

    js实现仿阿里巴巴城市选择框效果实例

    要实现一个类似于阿里巴巴城市选择框的效果，通常会使用JavaScript（简称js）作为主要编程语言，结合CSS来控制样式，以及数组等数据结构来存储和展示城市数据。具体实现过程中，会用到HTML页面构建基本结构，用CSS来...

    JS+CSS和图片美化select下拉列表选择框

    在网页设计中，为了提升用户体验和界面美观度，开发者经常需要对HTML中的基本元素进行美化，其中`select`下拉列表选择框就是常见的一个部分。本文将深入探讨如何使用JavaScript (JS) 和 CSS 结合图片资源来美化`...

    6个Web前端纯CSS3实现的单多选选择框（三）

    标题“6个Web前端纯CSS3实现的单多选选择框（三）”暗示了这一主题是关于第六种CSS3实现方式，可能是系列教程的一部分。我们将主要关注纯CSS3的方法，避免使用JavaScript库如jQuery，尽管它在某些场景下非常有用。 ...

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