您当前的位置:主页 > 教程合集 > 网站建设网站首页网站建设

用JS生成当前网页二维码

发布时间:2016-01-21编辑:余斗阅读:(0)字号:
    余斗在张戈博客发现他的每个页面都会生成一个二维码,手机扫描这个二维码就能在移动端查看响应的网页,觉得这个细节很好,最近他也更新了JS实现当前页面二维码的实现方法,余斗已经成功在自己博客实现,其实很简单。 代码如下:

    <html>
    <head>
        <meta charset="utf-8">
        <script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    </head>
    <body>
      <div id="output"></div>
      <script type="text/javascript">
          content = 'https://zhangge.net/';
          $('#output').qrcode({
                  width: 200,
                  height: 200,
                  render: "canvas",
                  correctLevel: 0,
                  text: content
          });
    </script>
    </body>
    </html>
     
    此代码直接用JS控制生成二维码在标签中,所生成的二维码是每个页面动态生成的二维码,扫码后打开的也是当前页面,但是不管是静态还是动态,如果采用古老的图片加载方式总是要产生一个http请求的,当页面处于海量访问时就会带来一定的负载了,这对网站服务器压力很大,而使用js生成二维码的方式,这图片就在前台浏览器生成的了,就不会对服务器产生多余请求,这个JS只有13KB,对网页加载影响可以不计。 预览及下载请点击:《用JS生成当前网页二维码(文件) 其中控制二维码的生成的参数还有:

    render : "canvas",//设置渲染方式
    width : 256, //设置宽度
    height : 256, //设置高度
    typeNumber : -1, //计算模式
    correctLevel : QRErrorCorrectLevel.H,//纠错等级
    background : "#ffffff",//背景颜色
    foreground : "#000000" //前景颜色
     
    中文网址兼容解决方法 由于这个JS是从外国传入,中文格式的网址生成不了二维码,所以还需要进一步改进,只要二维码编码前把字符串转换成utf-8即可,JS转码函数为:

    function utf16to8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for(i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
            } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
            }
            return out;
    }
     
    代入前面的代码中,完整为:

    <html>
    <head>
        <meta charset="utf-8">
        <script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    </head>
    <body>
      <div id="output"></div>
      <script type="text/javascript">
        function utf16to8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                            out += str.charAt(i);
                    } else if (c > 0x07FF) {
                            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
            }
            return out;
    }
    content = utf16to8('手机扫一扫,精彩随声带!');
    $('#output').qrcode({
            width: 200,
            height: 200,
            render: "canvas",
            correctLevel: 0,
            text: content
    });
    </script>
    </body>
    </html>
     
    预览中文格式的网址二维码生成,可以点击余斗博客底部网站的Tags页,找个中文的tags测试即可。 IE兼容解决方法 张戈于昨天更新文章,这个代码在IE中可能无法生成二维码,因为IE是不支持canvas模式,只支持table模式。因此多写一个判断:

    <script type="text/javascript">
    if(!+[1,]){ /* 新增判断:如果是IE浏览器,则使用table兼容方式 */
              Render = "table";
    } else {
              Render = "canvas";
    }
    $('#qr-img').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});
    </script>
     
    但是用table生成的二维码扫描不了,还需要指定下二维码的table属性,CSS中引入二维码的类名加入:

    <!-- table模式下修复点阵过于分散导致二维码扫描失效问题 -->
    <style>.qr-img td { border: none;padding: 0;}</style>
     
    最后,余斗奉上自己博客实现二维码的整个html及css样式,html代码如下:

    <html>
    <body>
    <div id="tbox">
    <a id="ewm" href="" title="二维码" >
    <div class="qr-img">
    <div class="ico"></div>
            <div id="output"></div>
            <div id="msg">手机扫一扫 精彩随身带</div>
            </div>
      <script type="text/javascript">
        function utf16to8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                            out += str.charAt(i);
                    } else if (c > 0x07FF) {
                            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
            }
            return out;
    }
    if(!+[1,]){ /* 新增判断:如果是IE浏览器,则使用table兼容方式 */
              Render = "table";
    } else {
              Render = "canvas";
    }
    $('#output').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});
    </script>
    </a>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="js.js"></script>
    </body>
    </html>
     
    CSS代码如下:

    *html { background-image: url(../images/08ea4dd36e9f4dfa9334ed9857dae4a5.gif); background-attachment: fixed; }/*解决IE6下滚动抖动的问题*/
    #tbox { width: 54px; float: right; position: fixed; right: 50px; bottom: 15px; _position: absolute; _bottom: auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
    _margin-bottom: 15px; }/*解决IE6下不兼容 position:fixed 的问题*/
    #ewm{ width: 54px; height: 56px; display: block; background:url(../images/icons.png) no-repeat #111 ;box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 10px;}
    #ewm:hover{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');background-color:rgba(17, 17, 17, 0.5)}
    #ewm{background-position:10px -451px;display:block;}
    #ewm:hover .qr-img{display:block;}
    .qr-img {display:none;position: absolute;border: 3px solid rgb(221, 221, 221); background:#fff none repeat scroll 0 0;border-radius: 5px;border: 1px solid #ddd;border-radius:2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); padding: 10px 10px 2px;max-width: 170px;right:60px;bottom:1px;z-index: 9999; }
    .qr-img td { border: none;padding: 0;}
    .ico{display:block;background:url(../images/qclogo.png) no-repeat scroll 0 0;position: absolute;top:75px;right: 75px;width: 30px;height: 30px;}
    #output{padding: 8px 8px 2px 8px;}
    #msg { color: #000;font-size: 14px; text-align: center;}
     
    余斗仿照张戈把自己的logo也加到二维码中间,这不影响二维码的扫描,是不是显得更好看了? 用JS生成当前网页二维码
关键字词JS 网页二维码
余斗余斗
  1. 转载请注明: 用JS生成当前网页二维码_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 网站建设 分类下,于2016-01-21最后更新
IIS7.0及IIS8.0添加Vary头和expires头(max-age缓存设置)
为博客首页添加一个播放公告的滚动条
手机扫一扫 随身带着看
鸿运国际手机登录首页