利用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 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

561
来自专栏lhyt前端之路

前端路由0.前言1.哈希路由2.history路由

后端有后端路由,根据路由返回特定的网页,代表者是传统的mvc模式,模板引擎+node。前端也有前端的路由,我们用三大框架做spa的时候,总是和路由离不开关系。主...

1432
来自专栏iOS开发攻城狮的集散地

更改网页的标签

1564
来自专栏娱乐心理测试

小程序——带参返回上一页几种方法

2094
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

2065
来自专栏BY的专栏

iOS开启热点或定位时状态栏变化导致布局改变

4555
来自专栏React Native开发圈

React Native二维码生成组件

value:二维码的值 size:大小,默认128 bgColor:背景色,默认#000 fgColor:前景是,默认#fff

1052
来自专栏性能与架构

jquery的ready方法实现原理

应用jquery时 ready是一个非常常用的方法,我们常常会写 $(document).ready(function) 或 $(function) re...

3457
来自专栏Core Net

SharePoint 2016 修改左上角连接

2916
来自专栏疯狂的小程序

像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

wn-cli 像React组件开发一样来开发微信小程序

4086

扫码关注云+社区