カラーピッカー ckazu Follow 2011-03-27 15:20:17 License: MIT License Fork0 Fav2 View665 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 30 lines HTML 4 lines CSS 17 lines とりたてて何のとりえもありません． 機械的に色を並べるには，どう書いたら良いのかと思いやってみました． ちなみに，テキストボックスには #96f, rgb(128, 256, 0), lightblue などと入力することもできます． カラーピッカー jQuery v1.5.1 var $table = $('<table/>').appendTo('#color-picker'); for (var r = 255; r >= 0; r -= 51) { var $tr = $('<tr/>').appendTo($table); for (var g = 255; g >= 0; g -= 51) { for (var b = 255; b >= 0; b -= 51) { $('<td/>') .css( 'background-color', 'rgb(' + r + ',' + g + ',' + b + ')' ) .appendTo($tr); } } } $('#color-picker td') .mouseover( function() { $('#color-code').text( $(this).css('background-color') ); }) .click( function() { $('#color-picker td.selected').removeClass('selected'); $(this).addClass('selected'); $('#current-color-code') .val($(this).css('background-color')) .css('background-color', $(this).css('background-color')); }); $('#current-color-code') .keyup( function() { $(this).css( {'background-color': $(this).val()} ); }); <div id="color-picker"> <p id="color-code"></p> <input type="text" id="current-color-code" value="rgb(255,255,255)" /> </div> カラーピッカー #color-picker { width: 100%; } #color-picker > table { margin: 4px auto; border: 1px solid #666; background: #ccc; } #color-picker > table td { margin: 0; padding: 0; border: 1px solid #fff; width: 16px; height: 16px; cursor: hand; } #color-picker > table td.selected { border-color: #f00; } #color-picker > table td:hover { border-color: #00f; } とりたてて何のとりえもありません． 機械的に色を並べるには，どう書いたら良いのかと思いやってみました． ちなみに，テキストボックスには #96f, rgb(128, 256, 0), lightblue などと入力することもできます． var $table = $('<table/>').appendTo('#color-picker'); for (var r = 255; r >= 0; r -= 51) { var $tr = $('<tr/>').appendTo($table); for (var g = 255; g >= 0; g -= 51) { for (var b = 255; b >= 0; b -= 51) { $('<td/>') .css( 'background-color', 'rgb(' + r + ',' + g + ',' + b + ')' ) .appendTo($tr); } } } $('#color-picker td') .mouseover( function() { $('#color-code').text( $(this).css('background-color') ); }) .click( function() { $('#color-picker td.selected').removeClass('selected'); $(this).addClass('selected'); $('#current-color-code') .val($(this).css('background-color')) .css('background-color', $(this).css('background-color')); }); $('#current-color-code') .keyup( function() { $(this).css( {'background-color': $(this).val()} ); }); <div id="color-picker"> <p id="color-code"></p> <input type="text" id="current-color-code" value="rgb(255,255,255)" /> </div> #color-picker { width: 100%; } #color-picker > table { margin: 4px auto; border: 1px solid #666; background: #ccc; } #color-picker > table td { margin: 0; padding: 0; border: 1px solid #fff; width: 16px; height: 16px; cursor: hand; } #color-picker > table td.selected { border-color: #f00; } #color-picker > table td:hover { border-color: #00f; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? とりたてて何のとりえもありません． 機械的に色を並べるには，どう書いたら良いのかと思いやってみました． ちなみに，テキストボックスには #96f, rgb(128, 256, 0), lightblue などと入力することもできます． Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ckazu URLhttp://d.hatena.ne.jp/ckazu/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/hzjd/js"></script> Tweet Twitter Discussion Questions on this code? Tags color Favorite by sion0303 ethertank: color
