0
この16進ランダム化関数が新しい色を生成するために値（var hex）を渡すことに問題があります。私はまだイベントハンドラーでは良くないので、どんな助けも本当に感謝しています。事前に感謝:)ランダムヘックスカラージェネレーター+ RGBスライダーjquery
<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 = 'ABCDEF';
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);
});
});
});
});
「何が間違っているのですか」「うまくいきませんか」 –
残念ながら、それは動作しません。 – dgills
私はhtmlを追加します – dgills