在线选择颜色(在线颜色编辑器JS)

最新推荐文章于 2023-03-11 12:37:35 发布
最新推荐文章于 2023-03-11 12:37:35 发布
阅读量3.6k 收藏
点赞数
文章标签： border function javascript null xhtml input

<!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" οnmοuseοver="doOver()" οnmοuseοut="doOut()" οnclick="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>

hjh202537
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
颜色编辑器
09-23
纯 js 颜色编辑器 方便好用
很好用的js文本编辑器
07-27
js文本编辑器，支持字体设置，颜色设置，和word文档相似
js 事件触发颜色选项框,选择颜色
09-10
js颜色选项框，触发事件弹出！js颜色选项框，触发事件弹js颜色选项框，触发事件弹js颜色选项框，触发事件弹
jscolor颜色编辑器
06-01
jscolor颜色编辑器
js 特效 html 特效 全新的颜色编辑器
08-23
js 特效 html 特效 全新的颜色编辑器 js 特效 html 特效 全新的颜色编辑器
JS实现的一个颜色选择框
小可的笔记本
07-13 490
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
Qt学习笔记(十三)：选择颜色对话框
秋忆夏伤的博客
03-25 1764
void Widget::on_pushButton_clicked() { // 打开选择颜色对话框，返回一个表示颜色的 QColor 对象 // getColor() 所有的参数都可以省略； // 参数1：选择颜色对话框打开时的默认颜色； // 参数2：指定父对象； // 参数3：指定对话框的标题； // 参数4：指定对话框外观的一些参数； ...
js实现的在线Html颜色选择器及Html颜色代码大全
key12315的专栏
03-11 519
在 HTML 中，可以使用十六进制值指定颜色: 十六进制颜色由#RRGGBB指定，其中RR（红色）、GG（绿色）和BB（蓝色）十六进制整数指定颜色的分量。 十六进制颜色表示值中rr（红色）、gg（绿色）和bb（蓝色）是介于00和ff之间的十六进制值（与十进制0-255相同） 大多数的浏览器都支持颜色名集合,另外216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色
js实现颜色选择器
浩星
08-03 7170
前言： 纯js就可以实现颜色选择器，不用安装很多的插件，和配置。也不必要有jquery才能使用，只是js文件就可以了。 目录： 实现原理： 如果要获取当前的颜色，可以获取结论的背景，或者再返回的函数里面直接写赋值。 实现步骤： 1、引入封装js文件 colorpicker.js 2、html部分： 3、js部分： 源码： colorpicker.js 源码： 实现效果：动图效果不知道为啥会自动加一个黄色背景 实现原理： 如果要获取当前的颜...
设定颜色值(仿WINDOW)
05-09 304
 var ColorHex=new Array(00,33,66,99,CC,FF)var SpColorHex=new Array(FF0000,00FF00,0000FF,FFFF00,00FFFF,FF00FF)var current=nullfunction intocolor(){var colorTable=for (i=
asp.net mvc 在线编辑器
03-23
主要功能： 字体，字号，段落格式，加粗，斜体，下划线，上标，下标，删除线，左对齐，居中，右对齐，全选，剪切，复制，粘贴，撤消，恢复，编号，项目符号，减少缩进量，增加缩进量，替换，插入超级链接，去掉超级链接，插入表格，插入行，删除行，插入列，删除列，插入水平线，字体颜色，字体背景颜色，特效字体，插入特殊符号，取消格式，清理代码，插入图片，插入Flash，插入Windows Media，插入Real Media，插入大表情，插入QQ表情，插入代码，插入引用，隐藏内容，上传并插入图片 特色功能： 首先漂亮，提供调用编辑器时候可以自定义颜色！ 然后操作简单，简单的一塌糊涂，呵呵，功能虽然多，可是绝对的精简，用最少的代码实现了最适用的功能！ 还有该编辑不是JS调用格式，纯ASP调用编辑菜单，安全性绝佳！ 另外，这个编辑器代码绝对精简，比起一般大型的编辑器，非常容易修改，改造成适用于自己的编辑器！
Colorinator在线颜色编辑器源码.rar
07-10
关于本应用-Colorinator 本应用是一个学习使用 jQuery 和 KnockoutJS 的实例。可以自动根据红色、绿色及蓝色值来计算、调整颜色，同时，应用中也使用了 Wijmo jQuery 的滚动条和文本框插件。 也可以收藏本页，随心所欲的在线调节颜色。 简要的KnockoutJS介绍 KnockoutJS 提供两个重要的元素使用MVVM模式： • JavaScript 类observable 和observableArray，用于监视ViewModel 变量的变动。 • 当页面中变量改变时，和observables 关联的HTML 扩展标记会自动更新数据。HTML扩展标记是非常丰富的，除了展示数值和字符串，他们也可以用于定制样式、展示列表、表格、图表等。这些The markup extensions are similar to Binding objects in XAML development. 使用KnockoutJS 开发程序，首先我们需要从创建包含业务逻辑ViewModel 的类开始。这些类可以通过在创建 View 之前进行测试。View 层使用HTML CSS 创建。 最后，通过KnockoutJS ApplyBindings 方法连接ViewModel和View，在这个方法中Object 模式被作为参数实际上创建绑定。 在我看来，KnockoutJS仅仅是一个外壳、一个框架，这些只是JS 框架的一些延伸。KnockoutJS 拥有丰富的官方例子、资源和详细的文档，可以从KnockoutJS 的官网获取。 <!--[if !supportLineBreakNewLine]--> <!--[endif]--> Wijmo 由于篇幅限制，这里就不过多解释了，更多详细信息，请自己百度。
html在线编辑器UBB_可以指定字体颜色下划线WORD格式工具条的效果.zip
01-29
html在线编辑器UBB_可以指定字体颜色下划线WORD格式工具条的效果.zip
学习js在线html(富文本,所见即所得)编辑器
10-27
需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本,本文介绍所见即所得编辑器实现原理
ace.js实现的编辑器
最新发布
03-26
ace.js编辑器是一个功能强大的开源代码编辑器，它以JavaScript为基础，并通过浏览器提供丰富的编辑功能。以下是关于ace.js编辑器的详细描述： 首先，ace.js编辑器支持多种编程语言，包括但不限于JavaScript、HTML、...
6 个用于颜色生成的 JavaScript 工具
分享身边生活经验blog
10-13 2113
没有颜色的世界会怎样？黑白配一点点灰色，也许吧。相当平淡。颜色会刺激大脑——它们会影响你的思维方式和做出的决定。一种颜色或一组颜色可以构成身份的一部分。想想与 Google 相关的红色、黄色、绿色和蓝色。所有这一切都表明为您的项目选择正确的颜色集非常重要。进来颜色发生器。颜色生成器用于为您的 Web 项目制作调色板。
在线调色工具、在线CSS工具、CSS设计展示网站汇总
热门推荐
小李专栏
03-15 1万+
点击这里使用RSS订阅本Blog： <!-- main_sub="c1s67";more_subs="";-->   在线调色工具收集1.Web 2.0 调色板：列出了目前主流web2.0网站的配色方案供你参考。2.colorblender-颜色在线编辑器：colorblender首页上提供无数种互联网上最流行的经常搭配在一起的六种基本色，你可
JS实现弹出窗口选择颜色源码
欢迎光临Andy511823558的空间
08-22 2190
JS实现弹出窗口选择颜色源码 标题页 function getColor(color) { var sInitColor = color;  //获取参数传递的颜色 if (sInitColor == null||sInitColor=="") var sColor = myColor.ChooseColorDlg();     //打开颜色对话框 else
html颜色编辑器,HTML5 渐变色彩编辑器
weixin_32660831的博客
06-10 265
JavaScript语言：JaveScriptBabelCoffeeScript确定function setInputColor(input) {input.style.backgroundImage = "linear-gradient(to right, transparent 80%, " + input.value + " 80%)";renderGradient();}var color...
小程序富文本编辑器设置字体颜色
07-29
要在小程序富文本编辑器中设置字体颜色，可以使用以下步骤： 1. 在富文本编辑器的格式化工具栏中添加一个颜色选择器按钮，用于选择字体颜色。 2. 监听颜色选择器的点击事件，在点击事件中调用小程序的选择颜色接口 wx.chooseColor()。 3. 在选择颜色接口的回调函数中，获取用户选择的颜色值。 4. 将获取到的颜色值应用到富文本编辑器的选中文本上，可以使用富文本编辑器的 API 来设置字体颜色。 下面是一个简单的示例代码： ```javascript // 监听颜色选择器的点击事件 onColorPickerClick() { // 调用小程序的选择颜色接口 wx.chooseColor({ success: (res) => { const { color } = res // 获取富文本编辑器组件实例 const editorContext = wx.createSelectorQuery().select('#editor').context // 设置字体颜色 editorContext.format('color', color) } }) } ``` 在上面的代码中，我们使用了`wx.chooseColor()`来让用户选择颜色。然后，在选择颜色成功的回调函数中，我们获取到用户选择的颜色值，并使用`editorContext.format()`方法来设置选中文本的字体颜色。 请注意，上述代码仅为示例，你需要根据自己的实际需求进行适当的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值