为了账号安全,请及时绑定邮箱和手机立即绑定

h5二维码及条形码

标签:
Html5

基于h5页面用于验票的二维码和条形码(仅供参考):
引用样式文件:http://p2fftzsm3.bkt.clouddn.com/tx.css
引用js库:http://p2fftzsm3.bkt.clouddn.com/tx.js
http://p2fftzsm3.bkt.clouddn.com/qr.js
引入之后写自己的js

  $(".matter").css("height",window.screen.height);    /****************************************上方为基础JS******************************************/
    /*
     * 页面加载时先选择B类型
     */
    function fct() {        document.getElementById("hidStr").value = 'B';
        selectText();
        creta()
    }    /*
     * 选择类型时将类型值赋给隐藏控件
     */
    function ChangeDdl(obj) {        document.getElementById("hidStr").value = obj.value;
    }    var num = 1; //全局变量存储按钮点击次数
    /*
     *生成条形码的方法
     */

    /*
     *文本框焦点和全选
     */
    function selectText() {        document.getElementById("txtCode").focus();        document.getElementById("txtCode").select();
    }    function getQueryString(name) { //取userID
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");        var r = window.location.search.substr(1).match(reg);        if (r != null) return unescape(r[2]);        return null;
    }    var qr = getQueryString("pr").split("-")[0];//条形码
    var pr = getQueryString("pr").split("-")[1];//二维码
    // console.log(qr)
    // console.log(pr)
    $("#hidStr").val(qr)
    $("#txtCode").val(qr)    
    function creta() {        var a = num++;        var divid = "div" + a; //定义div的id
        document.all.pertxt.innerHTML = ""; //清空说明文档
        document.all.tddiv.innerHTML = "<div class='barcode2' style='text-align:center;' id='" + divid + "'></div>" +            document.all.tddiv.innerHTML;
        createBarcode(divid, document.all.txtCode.value, document.all.hidStr.value); //条形码内容
        selectText();
    }    var qrcode = new QRCode(document.getElementById("qrcode"), {        render: "table", //设置渲染方式 (有两种方式 table和canvas,默认是canvas)     
        width: 190, //设置宽度      
        height: 190, //设置高度      
        // typeNumber  : -1,      //计算模式      
        correctLevel: 0, //纠错等级      
        background: "#ffffff", //背景颜色      
        foreground: "#000000", //前景颜色   
        img: "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg"
    });
    qrcode.makeCode(pr); //二维码内容



效果如下

webp

image.png



作者:代码风
链接:https://www.jianshu.com/p/f04d68a53974

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消