<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <title>七娃-二维码生成器</title>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

</head>

<style type="text/css">

.main{width: 1000px;margin: 0 auto;text-align: center;}

</style>

<body>

<div class="main">

<h1 align="center" style="margin-top: 50px;">网址二维码在线生成</h1>

<div id="qrcode" style="width:100px; height:100px; margin: 150px  auto 0 auto;"></div>

<input id="text" type="text" value="http://www.runoob.com" style="text-align: center;margin-top: 30px;width:40%;border: 1px solid #333;height: 36px;" /><br />

    </div>




<script type="text/javascript">

var qrcode = new QRCode(document.getElementById("qrcode"), {

width : 100,

height : 100

});




function makeCode () {

var elText = document.getElementById("text");

 

if (!elText.value) {

alert("Input a text");

elText.focus();

return;

}

 

qrcode.makeCode(elText.value);

}




makeCode();




$("#text").

on("blur", function () {

makeCode();

}).

on("keydown", function (e) {

if (e.keyCode == 13) {

makeCode();

}

});

</script>

</body>

</html>