js动态生成二维码

html:

<script type="text/javascript" src="js/qrcode.min.js"></script>(资源里可下载)

<div class="tan_ma" style="width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.5); display:none; justify-content: center; align-items: center;">

<div style="width:50%; background:#fff; padding:20px">

<div class="tan_close_ma" style="font-size:30px; margin-bottom:7px; float:right; position:relative; right:-5px; top:-5px">X</div>

<div id="code" style="clear:both;display:flex; justify-content: center; "></div>

</div>

</div>

$(document).on("click", ".fangda", function () {

var zhi=$(this).attr("zhi");

$("#code").html('');

$(".tan_ma").css("display","flex");

console.log('放大'+zhi);

var qrcode = new QRCode(document.getElementById("code"), {

width : 201,

height : 201

})

qrcode.makeCode(zhi)

})

$(document).on("click", ".tan_close_ma", function () {

$(".tan_ma").hide();

})

相关推荐
Monly216 分钟前
JS:JSON操作
前端·javascript·json
小何学计算机1 小时前
Nginx 配置基于主机名的 Web 服务器
服务器·前端·nginx
web_code1 小时前
vite依赖预构建(源码分析)
前端·面试·vite
觉醒法师1 小时前
HarmonyOS开发 - 本地持久化之实现LocalStorage支持多实例
前端·javascript·华为·typescript·harmonyos
小何学计算机2 小时前
Nginx 配置基于IP 地址的 Web 服务器
前端·tcp/ip·nginx
w风雨无阻w2 小时前
Vue3 学习笔记(十一)Vue生命周期
javascript·vue.js·前端框架·vue3
清清ww2 小时前
【vue】13.深入理解递归组件
前端·javascript·vue.js
清清ww2 小时前
【vue】09.computer和watch的使用
前端·javascript·vue.js
Gnevergiveup2 小时前
2024网鼎杯青龙组Web+Misc部分WP
开发语言·前端·python
你不讲 wood2 小时前
使用 Axios 上传大文件分片上传
开发语言·前端·javascript·node.js·html·html5