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();

})

相关推荐
打小就很皮...几秒前
React 实现富文本(使用篇&Next.js)
前端·react.js·富文本·next.js
智算菩萨35 分钟前
实战:高级中文自然语言处理系统的Python设计与实现
前端·javascript·easyui
远山无期1 小时前
解决Tailwind任意值滥用:规范化CSS开发体验
前端·css·eslint
用户54277848515401 小时前
Vue 3 中开发高阶组件(HOC)与 Renderless 组件
前端
幼儿园老大1 小时前
告别代码屎山!UniApp + Vue3 自动化规范:ESLint 9+ 扁平化配置全指南
javascript·vue.js
HIT_Weston1 小时前
67、【Ubuntu】【Hugo】搭建私人博客(一)
前端·ubuntu·hugo
阿里巴啦2 小时前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
Liu.7742 小时前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|2 小时前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
开发者小天2 小时前
react的拖拽组件库dnd-kit
前端·react.js·前端框架