专栏首页杨逸轩 ' sBlog利用JS生成当前页面二维码,简单实用

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

相关文章

  • 轻量级新浪图床程序 幻想领域1.0发布

    杨逸轩
  • 如何将Pjax整合进网站,实现全站无刷新加载?

    杨逸轩
  • 什么是静态和动态网页?

    杨逸轩
  • 产品经理从0到1要避免哪些坑?

    - 成都- 如果你在做互联网,那么应该会有这个疑问:为什么雷军、马化腾、张小龙等都在强调自己是产品经理?“如果你只是自己厨艺好,那最多是个好厨子,但是做不了好...

    腾讯大讲堂
  • 浏览器的visibilitychange 事件ie10以下不兼容

    deepcc
  • JavaScript监控当前cpu使用状况

    也许在你面试的某一天,突然问你一个问题:“如何粗略的计算出当前系统cpu的使用情况?”

    meteoric
  • JQuery常用方法总结

    1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

    用户1055830
  • 学问Chat UI(2)

    前言 上文讲了下要去做哪些事,重点分析了融云Sdk中RongExtension这个扩展控件,本文来学习下同样是融云Sdk中的AutoRefreshListVie...

    用户1148881
  • SpringBoot中MongoDB注解概念及使用

    主键,不可重复,自带索引,可以在定义的列名上标注,需要自己生成并维护不重复的约束。如果自己不设置@Id主键,mongo会自动生成一个唯一主键,并且插入时效率远高...

    天涯泪小武
  • sqlalchemy和flask-sqlalchemy的几种分页方法

    sqlalchemy中使用query查询,而flask-sqlalchemy中使用basequery查询,他们是子类与父类的关系 假设 page_index=1...

    用户1214487

扫码关注云+社区

领取腾讯云代金券