老师课下布置的作业，做的扩展性不错，代码分享如下：
<!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>