HTML颜色选择器实现代码

更新时间：2010年11月23日 21:56:02 作者：

HTML颜色选择器实现代码需要的朋友可以参考下。

<p>HTML颜色选择器</p> <p>范围：#000 - #FFF</p> <style></style> <p> <input id="txtColor" style="border: solid 10px black; padding: 2px;" onmouseover="selectColor(this);" type="text" /></p> <div class="divColor"> <script type="text/javascript">// <![CDATA[ function selectColor(o) { o.style.backgroundColor = '#FFF'; o.style.border = 'solid 10px ' + (o.value == '' ? 'black' : o.value); } function showColor(color) { document.getElementById('txtColor').style.border = 'solid 10px ' + color; } function setColor(color) { var txtColor = document.getElementById('txtColor'); txtColor.value = color; txtColor.style.backgroundColor = color; txtColor.select(); txtColor.focus(); } var c = '0123456789ABCDEF'; for (var r = 0; r < c.length; r++) { var color = '#' + c.charAt(r) + c.charAt(r) + c.charAt(r); document.write('<span onclick="setColor(\'' + color + '\');" onmouseover="showColor(\'' + color + '\');" style="background-color:' + color + ';">&emsp;</span>'); } document.writeln('<div style="clear:both; height:5px;"></div>'); var begin = 0; for (var i = 0; i < 2; i++) { begin = i * 8; for (var r = 0; r < c.length; r++) { document.writeln('<div class="clear">'); for (var g = begin; g < begin + 8; g++) { for (var b = 0; b < c.length; b++) { var color = '#' + c.charAt(r) + c.charAt(g) + c.charAt(b); document.write('<div onclick="setColor(\'' + color + '\');" onmouseover="showColor(\'' + color + '\');" style="background-color:' + color + ';"></div>'); } } document.writeln('</div>'); } } // ]]></script> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

颜色选择器

捕获和分析JavaScript Error的方法
这篇文章主要介绍了如何捕获和分析 JavaScript Error，感兴趣的朋友可以参考下
2014-03-03
JavaScript实现设计模式中的单例模式的一些技巧总结
单例模式是JavaScript项目中最常用的设计模式之一,下面罗列了JavaScript实现设计模式中的单例模式的一些技巧总结,包括惰性加载与分支技术等,需要的朋友可以参考下.
2016-05-05
JS实现获取时间已经时间与时间戳转换
这篇文章主要为大家提供了用JavaScript编写的获取时间的类，以及时间戳转时间的三种格式，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-03-03
webpack loader使用的安装配置
这篇文章主要为大家介绍了webpack loader使用的安装配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
javascript实现动态增加删除表格行(兼容IE/FF)
javascript实现动态增加删除表格行(兼容IE/FF)...
2007-04-04
聊聊鉴权那些事(推荐)
这篇文章主要介绍了聊聊鉴权那些事(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
uniapp实现全局设置字体大小(小中大的字体切换)
随着UniApp的流行,越来越多的开发者选择使用它来构建跨平台应用程序,下面这篇文章主要给大家介绍了关于uniapp实现全局设置字体大小(小中大的字体切换)的相关资料,需要的朋友可以参考下
2023-06-06
javascript实现的字符串与十六进制表示字符串相互转换方法
这篇文章主要介绍了javascript实现的字符串与十六进制表示字符串相互转换方法,涉及javascript字符串转换的相关技巧,在防止SQL注入和XSS中具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
js实现右下角提示框的方法
这篇文章主要介绍了js实现右下角提示框的方法,实例分析了Jquery插件popup.js的具体用法,需要的朋友可以参考下
2015-02-02
JavaScript实现x秒后自动跳转到一个页面
今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面,在网上搜了一下，关于这个技术处理有多种方法,有兴趣的朋友可以参考下
2013-01-01