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

发表评论

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

允许邮件通知

评论

13条评论
  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 回复

                    感谢分享

                    河南省郑州市 联通

                    1. avatar

                      娃娃 Lv.1 Sogou Explorer Sogou Explorer Windows Windows 回复

                      不错 谢谢分享

                      广东省佛山市 电信