將網頁生成二維碼
阿新 • • 發佈:2018-12-28
使用jquery.qrcode.min.js生成二維碼步驟:
1、引入相應的js,注意下面的兩個js都需要引入
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery.qrcode.min.js"></script>
2、頁面
<body> <div class="topicsCode"> <div id="qrcode"></div> <p class="prompt">請掃描二維碼在手機端預覽</p> </div> <script> $(function(){ $('#qrcode').qrcode('https://www.baidu.com'); }) </script> </body>
這樣一個簡單的生成二維碼的demo就完成了,jquery.qrcode.min.js還提供了一些屬性,用來修改生成二維碼的屬性。需要的話自行查閱文件。下面附上完整頁面程式碼:
你有多專注,就有多成功<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>預覽</title> <script type="text/javascript" src="/resources/js/jquery.min.js"></script> <script type="text/javascript" src="/resources/js/jquery.qrcode.min.js"></script> <style> .topicsCode{ width: 255px; height: 255px; text-Align:center; } .topicsCode{ position: absolute; top: 20%; left: 39.5%; } #qrcode{ margin: 0; padding: 0; } .prompt{ margin-top:5px; font-size:15px; } </style> </head> <body> <div class="topicsCode"> <div id="qrcode"></div> <p class="prompt">請掃描二維碼在手機端預覽</p> </div> <script> $(function(){ $('#qrcode').qrcode('https://www.baidu.com'); }) </script> </body> </html>