Pelaksanaan JS kemahiran contoh_javascript pemilih warna berorientasikan objek mudah-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Pelaksanaan JS kemahiran contoh_javascript pemilih warna berorientasikan objek mudah

May 16, 2016 pm 03:04 PM

js berorientasikan objek pemilih warna

Contoh dalam artikel ini menerangkan pelaksanaan pemilih warna berorientasikan objek mudah dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

&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;

Salin selepas log masuk

Rakan-rakan yang berminat dengan alatan warna JS boleh merujuk kepada alatan dalam talian laman web ini :

Penjana Pengekodan Warna RGB

Jadual Perbandingan Pertanyaan Warna RGB_Jadual Kod Warna_Nama Warna Bahasa Inggeris Lengkap

Alat padanan warna web dalam talian

Untuk lebih banyak kandungan berkaitan JavaScript, sila lihat topik khas di tapak ini: "Ringkasan JavaScript menukar kesan dan teknik khas", "Ringkasan teknik algoritma carian JavaScript" , "Animasi JavaScript Ringkasan kesan dan teknik khas", "Ringkasan ralat JavaScript dan teknik penyahpepijatan", "Ringkasan struktur data JavaScript dan teknik algoritma" , "Ringkasan algoritma dan teknik traversal JavaScript " dan "Ringkasan penggunaan operasi matematik JavaScript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn