网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JS实现简单面向对象的颜色选择器实例
内容
    本文实例讲述了JS实现简单面向对象的颜色选择器。分享给大家供大家参考，具体如下：
    <!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" bordercolor="#000000" mce_style="cursor:pointer;background:#ECE9D8" >';
      // html+= '<tr><td 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 width="20" height="20" 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">颜色选择</a>
    </div>
    <script type="text/javascript">
    <!--
    function initColorPicker(){
     picker = new colorPicker('demo');
    }
    // -->
    </script>
    </body>
    </html>
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 7:46:36