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使用ActiveXObject访问Access和SQL Server数据库
这篇文章主要介绍了JavaScript使用ActiveXObject访问Access和SQL Server数据库,本文分别给出相应操作代码,需要的朋友可以参考下
2015-04-04
随机生成10个不重复的0-100的数字(实例讲解)
下面小编就为大家带来一篇随机生成10个不重复的0-100的数字(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS实现灵巧的下拉导航效果代码
这篇文章主要介绍了JS实现灵巧的下拉导航效果代码,通过自定义js插件脚本dropdown.js实现简单的下拉导航效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
JavaScript实现一个多少秒后自动跳转的页面(案例代码)
最近遇到这样一个需求是用js简单实现一个多少秒后自动跳转的页面，实现代码非常简单，对js自动跳转页面相关知识感兴趣的朋友一起看看吧
2023-01-01
一秒学会微信小程序制作table表格
这篇文章主要教大家一秒学会微信小程序制作table表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
JS实现的简单下拉框联动功能示例
这篇文章主要介绍了JS实现的简单下拉框联动功能,涉及javascript事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2018-05-05
js-FCC算法-No repeats please字符串的全排列(详解)
下面小编就为大家带来一篇js-FCC算法-No repeats please字符串的全排列(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
网页爬虫之cookie自动获取及过期自动更新的实现方法
这篇文章主要介绍了网页爬虫之cookie自动获取及过期自动更新的实现方法,需要的朋友可以参考下
2018-03-03
JS获取经纬度并根据经纬度得到城市信息简单示例
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下
2023-11-11
js 可拖动列表实现代码
前天做了个树形菜单，今天接着让它可拖动。非常不错的效果，需要的朋友可以参考下。
2011-12-12

HTML颜色选择器实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具