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

发表评论

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

允许邮件通知

评论

15条评论
  1. avatar

    杰新博客 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows Windows 回复

    滴!学生卡!打卡时间:下午10:26:44,请上车的乘客系好安全带~

    浙江省 电信

    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 回复

                      不错,感谢

                      重庆市 电信