1. 程式人生 > >div輸入需要的資料,使用qrcode,點選生成二維碼

div輸入需要的資料,使用qrcode,點選生成二維碼

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>該二維碼支援中文和LOGO</title>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/utf.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.js"></script>
    <script type="text/javascript">
      

     
        var btn = function () {
            $("#qrcodeCanvas").qrcode({
                render: "canvas", //設定渲染方式,有table和canvas,使用canvas方式渲染效能相對來說比較好  
                text: "編碼:" + $("#ww").val() + "\n" + "編碼:" + $("#ww1").val(), //掃描二維碼後顯示的內容,可以直接填一個網址,掃描二維碼後自動跳向該連結  
                width: "400", //二維碼的寬度  
                height: "400", //二維碼的高度  
                background: "#ffffff", //二維碼的後景色  
                foreground: "#000000", //二維碼的前景色  
                src: 'img/1.jpg' //二維碼中間的圖片  
            });
        }

      
    </script>

</head>

<body>
    <center>

        <div id="" style="float: left;">
            編碼:
            <input id="ww" type="text" /><br/>
            編碼:
            <input id="ww1" type="text" /><br/>
            <input type="button" name="" id="btn" onclick="btn()" value="點選生成" style="width: 150px;height: 50px;border: none;" />
        </div>
        


        <div id="qrcodeCanvas" style="float: left;"></div>
    </center>
</body>

</html>

效果如圖所示