HTML颜色选择器实现代码

时间：2021-05-31 08:25:46|栏目：JavaScript代码|点击：次

<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需再刷新一下页面才能执行]

上一篇：JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

栏目：JavaScript代码

下一篇：JS中Json数据的处理和解析JSON数据的方法详解

本文标题：HTML颜色选择器实现代码

本文地址：http://www.codeinn.net/misctech/132483.html

更多JavaScript代码

JavaScript代码

HTML颜色选择器实现代码

阅读排行

推荐教程