jiguang · May 20, 2014 08:12
diff --git a/qrcode.html b/qrcode.html
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        *{ margin:0; padding: 0; }
        ul{ list-style: none; overflow: hidden;}
        .wrap{ padding: 20px;}
        .row{ margin-bottom: 15px;}
        .row input{ display: inline-block; height: 26px; line-height: 26px; padding: 0 4px;}
        .url{width: 70%;}
        .title{width: 20%; margin-left: 20px;}
        button{ cursor: pointer; padding: 3px 6px; margin-right: 10px; margin-bottom: 10px;}
        #result{
            padding: 20px 0;
        }
        #result li{
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        #result img{
            display: block;
            margin-bottom: 5px;
        }
        #result .tit{
            text-align: center;
            font-weight: 700;
            color: #333;
        }
    </style>
 </head>
 <body>
 <div class="wrap">
    <button id="create">生成二维码</button><button id="add">增加一行</button>
    <div class="row"><input class="url" type="text" placeholder="请输入地址"/><input class="title" type="text" placeholder="请输入标题"/></div>
    <ul id="result">

    </ul>
 </div>

 <script id="template" type="text/template">
    <div class="row"><input class="url" type="text" placeholder="请输入地址"/><input class="title" type="text" placeholder="请输入标题"/></div>
 </script>

 <script type="text/javascript">
    $('#add').on('click', function(){
        $($('#template').html()).insertAfter(this);
    });

    $('#create').on('click', function(){
        $('#result').empty();
        $('.wrap').find('.row').each(function(){
            var src = "https://chart.googleapis.com/chart?cht=qr&chs=160x160&choe=UTF-8&chld=L|0&chl=" + $(this).find('.url').val();
            var title = $(this).find('.title').val();
            $('#result').append('<li><img src="'+src+'" /><div class="tit">'+title+'</div></li>');
        });
    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<style type="text/css">
	*{ margin:0; padding: 0; }
	ul{ list-style: none; overflow: hidden;}
	.wrap{ padding: 20px;}
	.row{ margin-bottom: 15px;}
	.row input{ display: inline-block; height: 26px; line-height: 26px; padding: 0 4px;}
	.url{width: 70%;}
	.title{width: 20%; margin-left: 20px;}
	button{ cursor: pointer; padding: 3px 6px; margin-right: 10px; margin-bottom: 10px;}
	#result{
	padding: 20px 0;
	}
	#result li{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}
	#result img{
	display: block;
	margin-bottom: 5px;
	}
	#result .tit{
	text-align: center;
	font-weight: 700;
	color: #333;
	}
	</style>
	</head>
	<body>
	<div class="wrap">
	<button id="create">生成二维码</button><button id="add">增加一行</button>
	<div class="row"><input class="url" type="text" placeholder="请输入地址"/><input class="title" type="text" placeholder="请输入标题"/></div>
	<ul id="result">

	</ul>
	</div>

	<script id="template" type="text/template">
	<div class="row"><input class="url" type="text" placeholder="请输入地址"/><input class="title" type="text" placeholder="请输入标题"/></div>
	</script>

	<script type="text/javascript">
	$('#add').on('click', function(){
	$($('#template').html()).insertAfter(this);
	});

	$('#create').on('click', function(){
	$('#result').empty();
	$('.wrap').find('.row').each(function(){
	var src = "https://chart.googleapis.com/chart?cht=qr&chs=160x160&choe=UTF-8&chld=L\|0&chl=" + $(this).find('.url').val();
	var title = $(this).find('.title').val();
	$('#result').append('<li><img src="'+src+'" /><div class="tit">'+title+'</div></li>');
	});
	});
	</script>
	</body>
	</html>