Rumah > Artikel > hujung hadapan web > Pelaksanaan JS kemahiran contoh_javascript pemilih warna berorientasikan objek mudah

Pelaksanaan JS kemahiran contoh_javascript pemilih warna berorientasikan objek mudah

WBOYasal: 2016-05-16 15:04:271760semak imbas

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/JavaScript">
<!--
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+= '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >';
  // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';
  for(i=0;i<5;i++)
  {
   html+= "<tr>";
   for(j=0;j<8;j++)
   {
    html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'" mce_style="background:'+ this.colorPool[count]+'" unselectable="on"> </td>';
    count++;
   }
   html+= "</tr>";
  }
  html+= '</table>';
  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<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'
 }
}
// -->
</script>
<div >
<a href="#" mce_href="#" onclick="initColorPicker();return false" id="demo" style="position:absolute;left:200px">颜色选择</a>
</div>
<script type="text/javascript">
<!--
function initColorPicker(){
 picker = new colorPicker('demo');
}
// -->
</script>
</body>
</html>

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：

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

Artikel sebelumnya：Pengendalian iframe dalam jQuery (klik butang untuk mencipta tetingkap baharu)_jqueryArtikel seterusnya：Pengendalian iframe dalam jQuery (klik butang untuk mencipta tetingkap baharu)_jquery

Artikel berkaitan

Lihat lagi