html制作调色板,JS实现系统调色板
整体页面代码:
DW调色板
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function getEvent()
{
if(document.all)
{
return window.event;//如果是ie
}
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
}
function intocolor()
{
var colorTable=''
for (i=0;i<2;i++) //循环2部分
{
for (j=0;j<6;j++) //循环6行
{
colorTable=colorTable+'
'
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'
'
}
}
}
}
colorTable='
+'
'
+'
+'
当前色:'
+'
'
+'
+colorTable+'
';
colorpanel.innerHTML=colorTable
}
function doOver() {
var evt=getEvent();
var element=evt.srcElement || evt.target;
var DisColor=document.getElementById("DisColor");
var HexColor=document.getElementById("HexColor");
if ((element.tagName=="TD") && (current!=element)) {
if (current!=null){
current.style.backgroundColor = current._background
}
element._background = element.style.backgroundColor
DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
HexColor.value = rgbToHex(element.style.backgroundColor)
element.style.backgroundColor = "white"
current = element
}
}
function rgbToHex(aa)
{
if(aa.indexOf("rgb") != -1)
{
aa=aa.replace("rgb(","")
aa=aa.replace(")","")
aa=aa.split(",")
r=parseInt(aa[0]);
g=parseInt(aa[1]);
b=parseInt(aa[2]);
r = r.toString(16);
if (r.length == 1) { r = '0' + r; }
g = g.toString(16);
if (g.length == 1) { g = '0' + g; }
b = b.toString(16);
if (b.length == 1) { b = '0' + b; }
return ("#" + r + g + b).toUpperCase();
}
else
{
return aa;
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
var evt=getEvent();
var element=evt.srcElement || evt.target;
if (element.tagName=="TD"){
var bg=rgbToHex(element._background);
document.getElementById("orange").value=bg;
alert("选取颜色: "+bg);
return bg;
}
}
|
运行效果图:
html制作调色板,JS实现系统调色板相关推荐
- 16位调色板和32位调色板_设计系统的调色板第一部分
16位调色板和32位调色板 重点(Top highlight) 第1部分(Part 1) I've been creating custom design systems for over five ...
- VBA调用系统调色板
在Excel中设置单元格字体格式时,用户可以在调色板中选择颜色,如下图所示. 在VBA代码中如何提供调色板让用户选择颜色呢? 一种方法是调用Excel的系统对话框实现设置颜色,对话框如下图所示. Ap ...
- java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署
java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署 java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B/S架构 开 ...
- java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw
java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B ...
- 16位调色板和32位调色板_12种调色板提取器和站点色彩灵感资源
16位调色板和32位调色板 Sometimes the hue muse fails to strike; sometimes all you're provided for the look and ...
- 16位调色板和32位调色板_整理色板和调色板的10个技巧
知道自己有东西,但不知道它在哪里会令人沮丧. 对于您为设计项目创建或保存的颜色,尤其如此. 不得不遍历色样 , 浪费时间 ,只好在需要切换色相时重新开始搜索. 如果您经常使用吸管工具或将CMYK值插入 ...
- node mysql 模块化_Node.js 模块系统
Node.js模块系统 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node. ...
- R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(分组调色板填充、自定义调色板、灰度比例)实战(dot plot)
R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(分组调色板填充.自定义调色板.灰度比例)实战(dot plot) 目录 R语言使用ggplot2包使用geom_dotplot函 ...
- Auto.js 调用系统短信、电话
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js 调用系统短信.电话 操作 ...
- excel制作录入和查询系统_excel表格制作成绩查询系统攻略:让学生隐私更安全!
对于班主任来说,无论是收集学生信息,还是发布考试成绩,用得最多的就是excel表格了!很多老师在发布成绩的时候,多半会把统计好的表格直接发到群里让学生自行查询,这样一来虽然省事,但却极易招到投诉!下面 ...
最新文章
- Tomcat6 内存和线程配置
- python下载大文件-python requests 下载大文件不完整
- HDOJ 1056 HangOver
- JavaScript或jQuery中使用键盘控制对象运动
- Maven本地库添加Oracle JDBC驱动
- python制作软件excel_利用Python制作一个 截图+Excel操作浏览器小工具
- php实现栏目三种类型,WordPress后台edit-tags.php里无限栏目分类实现
- Winform软件,不要在线程里操作UI
- 一种语音识别模型的训练方法及装置与流程
- 【论文笔记】HyperFace: ADeep Multi-task Learning Framework for Face Detection
- 水滴IP教你如何查询QQ好友的IP地址
- 航空三字代码表_航空运输三字代码表
- 学习:对抗神经网络 - 恶意软件
- HTML5 混合APP开发学习笔记(三)——CSS样式设计
- 视频编辑常用软件有哪些
- 玩转B2B平台的商业模式你选对了吗?
- 项目型IT公司向产品型IT公司演进的必要性
- ACM常用模板-数据结构
- 计算机网络复习————概述,应用层,传输层
- vue向后台请求数据的配置和方法
热门文章
- 辽宁大学计算机专科专业,2020辽宁大学计算机考研专业课调整
- python导入numpy模块_Python之路-numpy模块
- 《python深度学习》笔记(八):回归问题
- 设计算法判断链表是否中心对称
- Hive split()、explode()和lateral view 应用单列,多列炸裂
- U盘插入电脑识别不出来,怎么解决?
- 前端第二章:6.浏览器的自动修复机制;网页布局 (header标签、main标签、footer标签;nav标签;aside标签)
- 基于AntDesign组件的Vue项目
- 平面设计师需要掌握哪些印刷知识
- 计算机CPU风扇的功能及作用,CPU和风扇之间涂的是什么东西