分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js生成简单二维码

发布时间:2023-09-06 02:36责任编辑:傅花花关键词:js二维码

js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485

一.引入qrcode.js文件

<script type="text/javascript" src="imgs/js/qrcode.js"></script>
 

二.定义用于展示二维码的div  并设置样式

<style type="text/css"> ???#qrcode{ ???position: absolute; ???left: 50%; ???top: 50%; ???/* margin-top:-200px; ???margin-left:-200px; */ ???margin:-200px 0 0 -200px; ???}</style><body> ???<div id="qrcode"></div></body>

三.js中生成二维码

? ???window.onload=function(){ ???????var qrcode = new QRCode(document.getElementById("qrcode"), { ???????????width : 400,//设置宽高 ???????????height : 400 ???????}); ???????qrcode.makeCode("二维码内容"); ???} ?

四.完整示例 

<%@ page language="java" contentType="text/html; charset=utf-8" ???pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>js生成二维码</title></head><script type="text/javascript" src="imgs/js/qrcode.js"></script> <script type="text/javascript"> ????window.onload=function(){ ???????var qrcode = new QRCode(document.getElementById("qrcode"), { ???????????width : 400,//设置宽高 ???????????height : 400 ???????}); ???????qrcode.makeCode("二维码内容"); ???} </script><style type="text/css"> ???#qrcode{ ???position: absolute; ???left: 50%; ???top: 50%; ???/* margin-top:-200px; ???margin-left:-200px; */ ???margin:-200px 0 0 -200px; ???}</style><body> ???<div id="qrcode"></div></body></html>

js生成简单二维码

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10623189.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved