随机十六进制颜色生成器+ RGB滑块jquery

Question

我在获取此十六进制随机化函数以传递值（十六进制变量）以生成新颜色方面遇到问题。 我对事件处理程序还不满意，因此非常感谢您的帮助。 提前致谢：）

<body>
 <div id="backgroundColor" style="background:#EEE8CD;">
   <p>R:
     <span class="wrap_red"><input class="r ch" type="range" min="0" max="255" /></span>
     <input type="number" min="0" max="255" />
   </p>
   <p>G:
     <span class="wrap_green"><input class="g ch" type="range" min="0" max="255" /></span>
     <input type="number" min="0" max="255" />
   </p>
   <p>B:   
     <span class="wrap_blue"><input class="b ch" type="range" min="0" max="255" /></span>
     <input type="number" min="0" max="255" />
   </p>
   <table id="tableRGB">
     <tr>
         <td>
           <strong>RGB: </strong>#<span class="result">567890</span>
         </td>
         <td>
           <strong> Hexadecimal: </strong>#<input type="number">
         </td>
    </tr>  
    </table> 
   <button type="button" id="button" onclick="click();">Generate</button>

$(document).ready(function () {  
    var Color = {
    defaults: {
    // Predefined hex codes that cant be used as random colors
    // All must be prefixed with the '#' indicator
    predef: [],

    // Maximum & Minimum random range values
    rangeMax: 255,
    rangeMin: 0,

    // Upper and lower level values that must be 
    // passed for random color acceptance
    //
    // By setting levelUp: 200, levelDown: 100; Neutral
    // colors like White, Gray, and Black can be somewhat weeded
    // out and your random colors will be full spectrum based.
    // Note*: Doing so increases likely hood of recursion
    levelUp: -1,
    levelDown: 256,

    // Recursion handlers
    recursionLimit: 15,
    recursion: function () {
        throw 'Recursion Error in Random Color Generator, ' +
            'too many tries on finding random color, ' +
            '[Limit ' + this.recursionLimit + ']';
    }
},

// Caching of random colors
stack: {},

// Returns a random color in hex code form, and caches
// find in the stack.

rand: function () {
    var defaults = this.defaults;
    return defaults.rangeMin + Math.floor(Math.random()*(defaults.rangeMax+1));
},
random: function (i) {
    var self = this,
        defaults = self.defaults,
        r = self.rand(),
        g = self.rand(),
        b = self.rand(),
        hex = self.rgb2hex(r, g, b),
        levels = true;

    // Check for recursion
    if (i === undefined || typeof i !== 'number') i = 0;
    else if (i++ > defaults.recursionLimit) return defaults.recursion();

    // Color already used, try another one
    if (self.stack[hex]) hex = self.random(i);

    // Ensure one of the vals is above levelUp and another is below levelDown
    // Check defaults comments for better understanding
    levels = !!(
        (r > defaults.levelUp || g > defaults.levelUp || b > defaults.levelUp) &&
        (r < defaults.levelDown || g < defaults.levelDown || b < defaults.levelDown)
    );
    if (! levels) hex = self.random(i);

    // Store on stack to help prevent repeat
    self.stack[hex] = [r,g,b];

    // Return hex code in #
    return hex;
}


// Returns hex code
rgb2hex: function (r,g,b) {
    var str = '0123456789ABCDEF';
    return '#' + [
        str.charAt( (r - r % 16) / 16) + str.charAt(r % 16),
        str.charAt( (g - g % 16) / 16) + str.charAt(g % 16),
        str.charAt( (b - b % 16) / 16) + str.charAt(b % 16)
    ].join('');
},

// Returns in array form [red, green, blue]
hex2rgb: function (hex) {
    if (hex.substr(0,1) === '#')
        hex = hex.substr(1);

    // Use the stack if possible to reduce processing
    return this.stack['#' + hex] ? this.stack['#' + hex] : 
        hex.length === 6 ? [
            parseInt(hex.substr(0, 2), 16),
            parseInt(hex.substr(2, 2), 16),
            parseInt(hex.substr(4, 2), 16)
        ] : hex.length === 3 ? [
            parseInt(hex.substr(0, 1), 16),
            parseInt(hex.substr(1, 1), 16),
            parseInt(hex.substr(2, 1), 16)
        ] : [];
}
   };
//Random color generator button
$('#generate').click( function () {
    $('div').each(function() {
        var th = $(this);
        hex = th.css('backgroundColor');
        rgb = hex.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var red = rgb[1];
        var green = rgb[2];
        var blue = rgb[3];

        th.find('.r').val(red);
        th.find('.r').parent('span').siblings('input').val(red);
        th.find('.g').val(green);
        th.find('.g').parent('span').siblings('input').val(green);
        th.find('.b').val(blue);
        th.find('.b').parent('span').siblings('input').val(blue);

        $('input').bind('change keyup click', function() {
            if ($(this).hasClass('ch')) {
                $(this).parent('span').siblings('input').val($(this).val());
            }
            else {
                if ($(this).val() > 255) 
                    $(this).val(255);
                if ($(this).val() < 0) 
                    $(this).val(0);
                    $(this).siblings('span').find('input').val($(this).val());
            }

            r = parseInt(th.find('.r').val()).toString(16);
            if (r.length == 1) 
                r = '0' + r;

            g = parseInt(th.find('.g').val()).toString(16);
            if (g.length == 1) 
                g = '0' + g;

            b = parseInt(th.find('.b').val()).toString(16);
            if (b.length == 1) 
                b = '0' + b;

            x = r + g + b;

            th.find('.result').html(x);
            th.css('backgroundColor', '#' + x);

        });
    });
});
});

Answer 1

对于初学者来说，不需要onclick="click()"则可以使用jQuery的.click()来捕获诸如$('#button').click(function(){/*do stuff*/})或者$('#button').click(function_name)那么您的代码中会有很多错误， jslint或jshint可能会有所帮助，这是我看到的错误：

错误：第51行第51个字符的问题：预期为“ {”，而是出现了“ i”。 如果（i === undefined || typeof i！=='number'）i = 0;

第52行第45个字符处的问题：预期为“ {”，而是出现了“ return”。 否则，如果（i ++> defaults.recursionLimit）返回defaults.recursion（）;

第55行第26个字符处的问题：预期为“ {”，而是为“ hex”。 如果（self.stack [hex]）hex = self.random（i）;

第63行第19个字符处的问题：预期为“ {”，而是为“ hex”。 如果（！级）十六进制= self.random（i）;

第74行字符1处的问题：期望'}'与第2行的'{'相匹配，而看到了'rgb2hex'。 rgb2hex：函数（r，g，b）{

第74行第8个字符的问题：缺少分号。 rgb2hex：函数（r，g，b）{

第74行字符8处的问题：期望'}'与第1行的'{'相匹配，而看到了'：'。 rgb2hex：函数（r，g，b）{

第74行字符10处的问题：预期为'）'，而是看到了'功能'。 rgb2hex：函数（r，g，b）{

第74行的字符26处的问题：缺少分号。 rgb2hex：函数（r，g，b）{

第74行第27个字符处的问题：希望看到一条语句，而是看到一个块。 rgb2hex：函数（r，g，b）{

第74行的字符27处的问题：正在停止，无法继续。 （已扫描50％）。 隐含全局：$ 1，r 74，g 74，b 74未使用的变量：颜色1“就绪”

随机十六进制颜色生成器+ RGB滑块jquery

问题描述

1 个解决方案

解决方案1
0 2012-03-12 03:08:06

随机十六进制颜色生成器+ RGB滑块jquery

问题描述

1 个解决方案

解决方案1 0 2012-03-12 03:08:06

解决方案1
0 2012-03-12 03:08:06