qrcode.js插件将你的内容转换成二维码格式

  • 内容
  • 相关

qrcode.js插件将你的内容转换成二维码格式

一个非常简单易用的原生插件——qrcode.js

可以不依赖后台的基础上直接将你的内容生成二维码格式,供给移动端扫描

若输入框不输入内容,则默认生成 “https://www.maple5.com/”内容

可以进入js将默认值修改下即可

使用方法:

1、将CSS样式拷贝到你的网页中

2、将body中需要的代码部分拷贝到你需要的地方即可

3、qrcode.js已附在下方,回复即可下载

(注意保持文件路径的正确性)

代码区:

<style>
.lanren{width: 500px;height: auto;margin:0 auto;overflow: hidden;text-align: center;}
.lanren #qrcode{width: 200px;height: 200px;position: relative;margin:10px auto;display: none;}
.lanren input{width: 200px;height: 20px;line-height: 20px;padding:4px;outline: 0;}
.lanren button{
 display: block;
 width: 120px;
 height: 45px;
 background: #0cc;
 text-align: center;
 line-height: 45px;
 border-radius: 45px;
 margin: 5px auto;
 border: none;
 cursor: pointer;
 color: #fff;
 outline: 0;
}
</style>
<div class="lanren">
<h1>请在下面输入框中输入内容</h1><h1>请在下面输入框中输入内容</h1>
<input type="text" placeholder="请在这里输入内容" id="demo">
<button id="send">点击生成二维码</button>
<div id="qrcode"></div>
</div>
<script src="js/qrcode.js"></script>
<script>
 window.onload =function(){
 (function(){
 var defaultContent = 'https://www.maple5.com/';
 var content = document.getElementById("qrcode");
 var qrcode = new QRCode(content,{ width:200, height:200 });
 document.getElementById("send").onclick =function(){
 var value = document.getElementById("demo").value || defaultContent;
 qrcode.makeCode(value); content.style.display = "block";
 }
 })();
 }
</script>
管理员设置回复可下载

本文标签:

版权声明:若无特殊注明,本文皆为《枫叶》原创,转载请保留文章出处。

本文链接:https://www.maple5.com/technology/7.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

14条评论
  1. avatar

    韦贝贝 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 Windows 7 回复

    感谢分享|!!

    浙江省宁波市慈溪市 电信

    1. avatar

      阿牧 Lv.2 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      试试看好像以后会用到

      陕西省西安市 电信

      1. avatar

        我myfairy Lv.1 Chrome 58.0.3029.61 Chrome 58.0.3029.61 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        试试看好像以后会用到

        云南省昆明市 联通

        1. avatar

          找女友 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          发的发的顺丰v

          新疆乌鲁木齐市 电信

          1. avatar

            6080 Lv.1 uBrowser 6.2.3964.2 uBrowser 6.2.3964.2 Windows 7 Windows 7 回复

            感谢分享|!!

            河南省郑州市 联通

            1. avatar

              千夜 Lv.1 Android Webkit 4.0 Android Webkit 4.0 Android 7.0 Android 7.0 回复

              我想下载

              甘肃省庆阳市 电信

              1. avatar

                小陌66 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

                浙江省温州市 移动

                1. avatar

                  落寞23123 Lv.2 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows XP Windows XP 回复

                  可以可以可以

                  北京市 移动

                  1. avatar

                    优纯旅游 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                    不错,感谢

                    重庆市 电信

                    1. avatar

                      fd Lv.1 uBrowser 6.2.3831.602 uBrowser 6.2.3831.602 Windows 7 Windows 7 回复

                      感谢分享

                      河南省郑州市 联通