1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>调色板</title> <script src="js/jquery.min.js"></script> <style> #board { width: 300px; height: 200px; background: black; } </style> </head> <body>
<div id="board"></div> <div> <span>R:</span> <input type="range" min="0" max="255" value="0"> <span>0</span> </div> <div> <span>G:</span> <input type="range" min="0" max="255" value="0"> <span>0</span> </div> <div> <span>B:</span> <input type="range" min="0" max="255" value="0"> <span>0</span> </div>
<script> let color = { r: 0, g: 0, b: 0 };
$("input:eq(0)").on("input", function(){ $("input:eq(0)+span").html($(this).val()); color.r = $(this).val(); $("#board").css({ background: `rgb(${color.r},${color.g},${color.b})` }); }); $("input:eq(1)").on("input", function(){ $("input:eq(1)+span").html($(this).val()); color.g = $(this).val(); $("#board").css({ background: `rgb(${color.r},${color.g},${color.b})` }); }); $("input:eq(2)").on("input", function(){ $("input:eq(2)+span").html($(this).val()); color.b = $(this).val(); $("#board").css({ background: `rgb(${color.r},${color.g},${color.b})` }); });
</script>
</body> </html>
|