利用JS生成当前页面二维码,简单实用

二维码对于推广和分享页面被广泛使用,尤其在移动端使用更加频繁。今天为大家介绍一种利用Js在web界面快速生成二维码的方法,使用非常简便。 代码如下:

<div style=" text-align:center;">
    <script type="text/javascript">
    var _qrContent = 'https://www.monst.cc',  /**二维码url地址**/
    _qrLogo = 'https://monst.cc/tx.jpg',  /**二维码中间logo,必须是网络地址**/
    _qrWidth = 180, /**二维码宽度**/
    _qrHeight = 180, /**二维码高度**/
    _qrType = 'url';
    if (!_qrContent) var _qrContent = escape(document.location.href);
    document.write(unescape("%3Cscript src='http://qrcode.leipi.org/js.html?qw=" + _qrWidth + "&qh=" + _qrHeight + "&qt=" + _qrType + "&qc=" + escape(_qrContent) + "&ql=" + escape(_qrLogo) + "' type='text/javascript'%3E%3C/script%3E"));
    </script>
    </div>

1.把上面这段代码插入到你的页面中,放置在需要生成二维码的位置当中。

2.设置js中二维码的地址、宽度、高度以及logo图片等属性。

3.设置div的样式,将二维码显示到合适的位置。

我这里调用了帝国cms的标签,生成了当前内容页url的二维码,扫描后就可以分享本页面了,是不是觉得很简单?!

 (function(){     var bp = document.createElement('script');     
 var curProtocol = window.location.protocol.split(':')[0];     
 if (curProtocol === 'https')
  {        
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';            
    }    
     else {        
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';     }    
       var s = document.getElementsByTagName("script")[0];    
        s.parentNode.insertBefore(bp, s); })();
         var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260547118'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1260547118%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子墨的前端日常

懒就是生产力之图片懒加载

最近负责的项目渐渐的由业务型转向营销型,营销内容越来越多,图片也就多了起来。图片一多起来问题就来了,一上来几十张图片加载起来半天都过去了,咋办?凉拌--懒加载

722
来自专栏葡萄城控件技术团队

MultiRow发现之旅(三)- 模板管理器和Table

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 模板管理器 当模板中Cell比较多的时候,你往...

17510
来自专栏Jerry的SAP技术分享

如何debug web worker

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers 就可以通过 postMessage...

2192
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码。 自由桌面:用户可以随意增删改桌面的布局、...

19910
来自专栏Python自动化测试

页面对象的定位

在自动化的测试中,对象元素的定位和操作是自动化的核心部分,但是对象是定位是自动化的基础,在对象的基础上,才可以形成对对象的操作。

523
来自专栏腾讯NEXT学位

简单三步做出微信h5表情包

1394
来自专栏陈仁松博客

UWP基础教程 - AuotmationProperties.Name

作为Windows10 UWP开发,大家应该会在很多示例DEMO里面看到AuotmationProperties.Name这个属性吧 <Button Autom...

3265
来自专栏杨龙飞前端

win8效果的横向布局

1223
来自专栏coding for love

CSS常用布局实现04-三列布局

三列布局应该是非常经典的一个布局,考虑下面这个问题,实现左中右三列,其中左右两列宽度已知为200px,中间宽度自适应。该如何实现?

832
来自专栏微信终端开发团队的专栏

Windows微信DPI适配

一、背景 随着近些年屏幕设备的不断发展,各种显示设备的分辨率也越来越高,在尺寸保持基本不变的情况下,分辨率越高,设备的DPI也越高,清晰度也就越高。高DPI的...

3159

扫码关注云+社区