zoukankan      html  css  js  c++  java
  • html 颜色选择器 亲测,很好用

    @*以下 是测试html 颜色选择器的*@

    @*<a href="#" mce_href="#" onclick="initColorPicker('demo'); return false" id="demo" style="position:absolute;left:200px">颜色选择</a>*@
    <!-- Color Picker -->
    @*<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, idStr);
    }
    }
    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, idStr) {
    this.hide();
    // document.getElementById(idStr).style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能
    document.getElementById(idStr).style.color = c
    //var rgb2Hex = colorRGB2Hex(c);
    //alert(rgb2Hex);
    },
    hide: function () {
    this.div.style.display = 'none'
    },
    show: function () {
    this.div.style.display = 'block'
    }
    }
    function initColorPicker(str) {
    picker = new colorPicker(str);
    }
    function colorRGB2Hex(color) {
    var rgb = color.split(',');
    var r = parseInt(rgb[0].split('(')[1]);
    var g = parseInt(rgb[1]);
    var b = parseInt(rgb[2].split(')')[0]);

    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
    }
    </script>*@

  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/guzhengtao/p/20180816_1540.html
Copyright © 2011-2022 走看看