간단한 객체 지향 색상 선택기 example_javascript 기술의 JS 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

간단한 객체 지향 색상 선택기 example_javascript 기술의 JS 구현

May 16, 2016 pm 03:04 PM

js 객체지향 색상 선택기

이 기사의 예에서는 JS에서 간단한 객체 지향 색상 선택기의 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

&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;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/JavaScript"&gt;
&lt;!--
var colorPicker = function(idStr){
 this.colorPool = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF","#FFFFFF"];
 this.initialize(idStr);
}
colorPicker.prototype = {
 initialize: function(idStr){
  var count=0;
  var html = '';
  var self = this;
  html+= '&lt;table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" &gt;';
  // html+= '&lt;tr&gt;&lt;td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff"&gt;当前颜色&lt;/td&gt;&lt;/tr&gt;';
  for(i=0;i&lt;5;i++)
  {
   html+= "&lt;tr&gt;";
   for(j=0;j&lt;8;j++)
   {
    html+= '&lt;td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'" mce_style="background:'+ this.colorPool[count]+'" unselectable="on"&gt; &lt;/td&gt;';
    count++;
   }
   html+= "&lt;/tr&gt;";
  }
  html+= '&lt;/table&gt;';
  this.trigger = document.getElementById(idStr);
  this.div = document.createElement('div');
  this.div.innerHTML = html;
  var tds = this.div.getElementsByTagName('td');
  for(var i=0,l=tds.length;i&lt;l;i++){
   tds[i].onclick = function(){
    self.setColor(this.style.backgroundColor);
   }
  }
  this.div.id = 'myColorPicker';
  this.trigger.parentNode.appendChild(this.div);
  this.div.style.position = 'absolute';
  this.div.style.left = this.trigger.offsetLeft + 'px'
  this.div.style.top = (this.trigger.clientHeight + this.trigger.offsetTop)+ 'px';
  //this.hide();
  this.trigger.onclick = function(){
   if(self.div.style.display == 'none'){
    self.show();
    return false;
   }else{
    self.hide();
    return false;
   }
  }
 },
 setColor : function(c){
  this.hide();
  document.getElementById('demo').style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能
 },
 hide : function(){
  this.div.style.display = 'none'
 },
 show : function(){
  this.div.style.display = 'block'
 }
}
// --&gt;
&lt;/script&gt;
&lt;div &gt;
&lt;a href="#" mce_href="#" onclick="initColorPicker();return false" id="demo" style="position:absolute;left:200px"&gt;颜色选择&lt;/a&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function initColorPicker(){
 picker = new colorPicker('demo');
}
// --&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

JS 컬러 도구에 관심이 있는 친구들은 이 웹사이트의 온라인 도구를 참고하세요 :

RGB 색상 코딩 생성기

RGB 색상 쿼리 비교표_색상 코드표_색상 영문명 완성

온라인 웹 컬러 매칭 도구

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.