老師課下布置的作業，做的擴展性不錯，代碼分享如下：
<!doctype html> <html> <head> <title>顏色漸變調節器</title> <meta charset='utf-8' /> <style type="text/css"> #canvas{height:100px;width:980px;border:2px black solid;border-radius:10px;} form{padding:20px;} form div{padding:10px;} p{background:-webkit-linear-gradient(top,#ffff00,#f00);background:-o-linear-gradient(top,#ffff00,#f00);padding:10px;border-radius:10px;text-align:center;width:964px;color:#fff;text-shadow:1px 1px 1px #000;} </style> </head> <body> <p>@謝帥shawn 顏色漸變調節器</p> <div id='canvas'></div> <form> 水平漸變：<input type='radio' name='direction' checked="checked"/>徑向漸變：<input type='radio' name='direction'/> <div> <span>color:</span><input type='color' value='#ff0000'/><br/> <span>range:</span><input type="range" name="colorstop" max='100' min='0' step='1' value="0" /> <output name='colorstopoutput'>0</output> </div> <div> <span>color:</span><input type='color' value='#00ff00'/><br/> <span>range:</span><input type="range" name="colorstop" max='100' min='0' step='1' value="100" /> <output name='colorstopoutput'>100</output> </div> <input type='button' value='增加顏色'/> <input type='button' value='刪除顏色'/> </form> <script src='jQuery.js'></script> <script> //實時顯示range的數值 $('input[type=range]').live('input',function () { $(this).next().val($(this).val()); }); //刷新顏色 function changeColor() { if($('input[type=radio]')[0].checked){ var gradient="linear-gradient(left"; }else { var gradient="radial-gradient(center,circle cover"; } for (var i=0; i<$('form output').length; i++) { gradient=gradient+','+$('input[type=color]:eq('+i+')').val()+' '+$('input[type=range]:eq('+i+')').val()+'%'; } gradient=gradient+')'; gradient1='-o-'+gradient; gradient2='-webkit-'+gradient; $('#canvas').css('background',gradient1); $('#canvas').css('background',gradient2); } //綁定刷新顏色的事件 $('form').bind('input',changeColor); $('input[type=radio]').bind('click',changeColor);//chrom下單選框不支持input事件 //增加顏色 $('input[value=增加顏色]').bind('click',function () { $(this).before("<div><span>color:</span><input type='color'/><br/><span>range:</span><input type='range' max='100' min='0' step='1' value='0' /><output>0</output></div>"); }) //刪除顏色 $('input[value=刪除顏色]').bind('click',function () { $('div:last').remove(); changeColor(); }) //int初始化顏色 $(changeColor); </script> </body> </html>