Jquery掃描二維碼的簡單實現

二維碼:利用圖形模擬二進制0、1的概念,達到存儲少量數據的功能,一般移動端瀏覽器解析出二維碼裡面隱藏的url數據會自動進行跳轉,常見的支付寶、微信掃描登陸就是利用該原理

Jquery二維碼的實現:jquery.qrcode.min.js插件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qrcode</title>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head>
<body>
    <input type="button" value="二維碼" id="bt" />:  <span id="count"></span>
    <br>
    <p id="code"></p>
    <br>
</body>
 
<script type="text/javascript">
 
   var i=0;
    $("#bt").click(function() {
 
        $("#count").text(++i);
        $("#code").text("");  //初始化二維碼的位置
 
        jQuery('#code').qrcode({
            render : "canvas",//也可以替換為table
            width : 100,
            height : 100,
            text : "https://www.biadu.com"    //二維碼內置內容,如果時URL形式一般瀏覽器會自動加載
        });
    });
</script>
</html>

這裡寫圖片描述

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *