1. 程式人生 > >高佔路 廊坊師範學院資訊科技提高班十四期

高佔路 廊坊師範學院資訊科技提高班十四期

使用js生成二維碼。

<head>
 
</style>
    <%--生成二維碼使用的js檔案引入--高佔路 2018-9-28 14:58:14--%> 
    <script src="../JS/QRCodejs/jquery-3.2.1.min.js"></script>
    <script src="../JS/QRCodejs/jquery.qrcode.min.js"></script>
    <!--引入cookie的js-->
    <script src="/OrderSys/JS/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {    
         var str = $.cookie("username");     <%--獲取儲存到cookie中的卡號--%>   
            $('#code').qrcode(toUtf8(str));
        })
        function toUtf8(str) {
            var out, i, len, c;

            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }
    </script>

</head>

<body>
    <%--顯示生成二維碼圖片的空間--%> 
     <div id="main">
        <div class="demo">
            <p>使用二維碼取餐</p>         
            <div id="code" style="text-align: center;"></div>
        </div>
    </div>       
</body>

上面有幾個js的檔案,大家可以用百度搜下就OK了,其中少了一些css的程式碼,可以補充一下。檔案按名字百度就能找到,  csdn的js檔案一定沒有問題。