派大星爱吃小鱼干

js(jQ)生成二维码复制粘贴功能

2019-08-14  本文已影响0人  程序猿阿峰

复制功能(兼容火狐IE9)

页面布局我就不写了,我知道你可以看得懂得。

// 复制功能
$(document).on('click', '.copy-link', function() {
    var text = 'http://baidu.com'  // 复制的内容
    var createInput = document.createElement('input');
    createInput.value = text;
    document.body.appendChild(createInput);
    createInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    createInput.className = 'createInput';
    createInput.style.display='none';
    layer.msg("复制成功") // layer ui 框架提示
})

生成二维码


jquery-qrcode最新代码

  1. 首先在页面中加入jquery库文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
  1. 在页面中需要显示二维码的地方加入以下代码:
<div id="code"></div>
  1. 调用qrcode插件。
    qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:
$('#code').qrcode("http://www.helloweba.net"); // 任意字符串

也可以通过以下方式调用:

$("#code").qrcode({
    render: "table", //table方式
    width: 200, //宽度
    height:200, //高度
    text: "www.helloweba.net" //任意内容
});
效果图
//复制功能
$('#tg').on("click", ".as-item-btns .copy", function() {
    var text = $(this).data('copy')
    $("#code").qrcode({
        // render: "table", //table方式
        width: 100, //宽度
        height: 100, //高度
        text: text //任意内容
    });
    layer.open({
        type: 1,
        // closeBtn :true,
        title: ['分享', 'text-align:center;font-size:18px;'],
        area: ['650px', 'auto'], //宽高
        content: $('#uploadTake1'), 
        cancel: function(index, layero) {
            var child = $("#code").children()
            child.remove()
        }
     })
     $('#uploadTake1').find('.buyer-remark').html(text)
    
})

上一篇 下一篇

猜你喜欢

热点阅读