HTML颜色选择器实现代码

<p>HTML颜色选择器</p> 
<p>范围：#000 - #FFF</p> 
<style><!-- 
.divColor div 
{ 
float:left; 
width:5px; 
height:5px; 
line-height:0px; 
font-size:0px; 
cursor:pointer; 
}

.divColor span 
{ 
display:block; 
float:left; 
width:40px; 
height:20px; 
cursor:pointer; 
} 
.divColor .clear 
{ 
height:auto; 
width:auto; 
clear:both; 
font-size:0px; 
line-height:0px; 
} 
--></style> 
<p> 
<input id="txtColor" style="border: solid 10px black; padding: 2px;" onmouseover="selectColor(this);" type="text" /></p> 
<div class="divColor"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%2F%2F%20%3C!%5BCDATA%5B%20%0D%0Afunction%20selectColor(o)%20%7B%20%0D%0Ao.style.backgroundColor%20%3D%20'%23FFF'%3B%20%0D%0Ao.style.border%20%3D%20'solid%2010px%20'%20%2B%20(o.value%20%3D%3D%20''%20%3F%20'black'%20%3A%20o.value)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20showColor(color)%20%7B%20%0D%0Adocument.getElementById('txtColor').style.border%20%3D%20'solid%2010px%20'%20%2B%20color%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20setColor(color)%20%7B%20%0D%0Avar%20txtColor%20%3D%20document.getElementById('txtColor')%3B%20%0D%0AtxtColor.value%20%3D%20color%3B%20%0D%0AtxtColor.style.backgroundColor%20%3D%20color%3B%20%0D%0AtxtColor.select()%3B%20%0D%0AtxtColor.focus()%3B%20%0D%0A%7D%20%0D%0A%0D%0Avar%20c%20%3D%20'0123456789ABCDEF'%3B%20%0D%0Afor%20(var%20r%20%3D%200%3B%20r%20%3C%20c.length%3B%20r%2B%2B)%20%7B%20%0D%0Avar%20color%20%3D%20'%23'%20%2B%20c.charAt(r)%20%2B%20c.charAt(r)%20%2B%20c.charAt(r)%3B%20%0D%0Adocument.write('%3Cspan%20onclick%3D%22setColor(%5C''%20%2B%20color%20%2B%20'%5C')%3B%22%20onmouseover%3D%22showColor(%5C''%20%2B%20color%20%2B%20'%5C')%3B%22%20style%3D%22background-color%3A'%20%2B%20color%20%2B%20'%3B%22%3E%26emsp%3B%3C%2Fspan%3E')%3B%20%0D%0A%7D%20%0D%0Adocument.writeln('%3Cdiv%20style%3D%22clear%3Aboth%3B%20height%3A5px%3B%22%3E%3C%2Fdiv%3E')%3B%20%0D%0Avar%20begin%20%3D%200%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%20%3C%202%3B%20i%2B%2B)%20%7B%20%0D%0Abegin%20%3D%20i%20*%208%3B%20%0D%0Afor%20(var%20r%20%3D%200%3B%20r%20%3C%20c.length%3B%20r%2B%2B)%20%7B%20%0D%0Adocument.writeln('%3Cdiv%20class%3D%22clear%22%3E')%3B%20%0D%0Afor%20(var%20g%20%3D%20begin%3B%20g%20%3C%20begin%20%2B%208%3B%20g%2B%2B)%20%7B%20%0D%0Afor%20(var%20b%20%3D%200%3B%20b%20%3C%20c.length%3B%20b%2B%2B)%20%7B%20%0D%0Avar%20color%20%3D%20'%23'%20%2B%20c.charAt(r)%20%2B%20c.charAt(g)%20%2B%20c.charAt(b)%3B%20%0D%0Adocument.write('%3Cdiv%20onclick%3D%22setColor(%5C''%20%2B%20color%20%2B%20'%5C')%3B%22%20onmouseover%3D%22showColor(%5C''%20%2B%20color%20%2B%20'%5C')%3B%22%20style%3D%22background-color%3A'%20%2B%20color%20%2B%20'%3B%22%3E%3C%2Fdiv%3E')%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.writeln('%3C%2Fdiv%3E')%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20%5D%5D%3E%3C%2Fscript%3E"> 
</div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程