基于html5 input API和css3 颜色渐变的颜色渐变调节器

基于html5 input API和css3 颜色渐变的颜色渐变调节器_第1张图片

老师课下布置的作业,做的扩展性不错,代码分享如下:

<!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&nbsp;&nbsp;颜色渐变调节器</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>

你可能感兴趣的:(html5)