批量动态生成二维码

最新推荐文章于 2024-01-16 11:15:53 发布

weixin_34006468

最新推荐文章于 2024-01-16 11:15:53 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weiok/p/5983367.html

本文介绍了一种使用JavaScript批量动态生成二维码的方法。通过为每个需要转换成二维码的链接分配唯一标识符，并利用QRCode库来实现二维码的创建。适用于网站中大量链接的快速二维码生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

批量动态生成二维码

   <script type="text/javascript" src="/site_media/js/qrcode.js"></script>
   // 生成二维码
    $(".qrcode").each(function(){
        var timestamp = new Date().getTime() + Math.random().toString().split(".")[1];  // 时间戳 + 随机数
        $(this).attr("id", timestamp);
        var q_type = $(this).attr("data-type");
        var q_id = $(this).attr("data-id");
        var qrcode_text = "http://www.domain.cn/qr/?type="+q_type+"&id="+q_id;

        var qrcode = new QRCode(timestamp, {
            width: 140,
            height: 140,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.L
        });
        qrcode.makeCode(qrcode_text);
    });

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="qrcode.js"></script>
</head>
<body>
    <div id="div1">http://baidu.com</div>
    <div id="div2">http://baidu.com</div>
    <div id="div3">http://baidu.com</div>
    <div id="div4">http://baidu.com</div>
    <div id="div5">http://baidu.com</div>
    <div id="div6">http://baidu.com</div>
    <div id="div7">http://baidu.com</div>
    <div id="div8">http://baidu.com</div>
    <div id="div9">http://baidu.com</div>
    <div id="div10">http://baidu.com</div>

    <script>
        var tags = document.getElementsByTagName('div');
        for (var i = tags.length - 1; i >= 0; i--) {
            var _id = tags[i].getAttribute('id');
            
            var qrcode = new QRCode(_id, {
                width: 160,
                height: 160,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.L
            });
            var text = tags[i].innerHTML;
            qrcode.makeCode(text);
        }
    </script>
</body>
</html>