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

发表评论

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

评论

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

      不错 谢谢分享

      广东省佛山市 电信

      1. avatar

        Error Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

        阿,可以

        江苏省扬州市 电信

        1. avatar

          杨小杰 Lv.1 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          看样子可以做个api

          四川省成都市 电信

          1. 枫叶 QQbrowser QQbrowser Android 7.1.1 Android 7.1.1 回复

            回复了杨小杰:感觉你什么都要做个api,哈哈。

            广东省深圳市 电信