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

一.引入qrcode.js文件

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

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

  1. <style type="text/css">
  2.     #qrcode{
  3.     position: absolute;
  4.     left: 50%;
  5.     top: 50%;
  6.     /* margin-top:-200px;
  7.     margin-left:-200px; */
  8.     margin:-200px 0 0 -200px;
  9.     }
  10. </style>
  11. <body>
  12.     <div id="qrcode"></div>
  13. </body>

三.js中生成二维码

  1. ​
  2.     window.onload=function(){
  3.         var qrcode = new QRCode(document.getElementById("qrcode"), {
  4.             width : 400,//设置宽高
  5.             height : 400
  6.         });
  7.         qrcode.makeCode("二维码内容");
  8.     }
  9.  
  10. ​

四.完整示例 

  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2.     pageEncoding="utf-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>js生成二维码</title>
  8. </head>
  9. <script type="text/javascript" src="imgs/js/qrcode.js"></script>
  10.  
  11. <script type="text/javascript">
  12.  
  13.     window.onload=function(){
  14.         var qrcode = new QRCode(document.getElementById("qrcode"), {
  15.             width : 400,//设置宽高
  16.             height : 400
  17.         });
  18.         qrcode.makeCode("二维码内容");
  19.     }
  20.  
  21. </script>
  22. <style type="text/css">
  23.     #qrcode{
  24.     position: absolute;
  25.     left: 50%;
  26.     top: 50%;
  27.     /* margin-top:-200px;
  28.     margin-left:-200px; */
  29.     margin:-200px 0 0 -200px;
  30.     }
  31. </style>
  32. <body>
  33.     <div id="qrcode"></div>
  34. </body>
  35. </html>

js生成简单二维码的更多相关文章

  1. js生成中文二维码

    http://www.cnblogs.com/xcsn/archive/2013/08/14/3258035.html http://www.jb51.net/article/64928.htm 使用 ...

  2. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  3. JS生成URL二维码

    需求:项目中需要在UI界面有一个二维码,扫码后可以跳转到二维码包含的URL. 解决方案:在前端用js生成一个包含URL等信息的二维码. 实现: 方案一. <!DOCTYPE HTML PUBLI ...

  4. python应用：生成简单二维码

    概述 \(\quad\)第一篇python的应用就打算写一写用python生成简单的二维码啦.因为二维码在日常生活中越来越常用了,部分博客也用二维码来用作打赏的工具.但是要提醒大家的是,千万不要乱扫街 ...

  5. 【记录】JS 生成 URL 二维码

    示例代码: <html> <head> <title>example</title> </head> <body> <sc ...

  6. html端输入数据，利用qrcode.js生成打印二维码

    在前端页面中导入qrcode.js(下载)和jquery.js(下载) index.html <script> function print() { var textbox1 = $('i ...

  7. Android生成自定义二维码

    前面说过两种二维码扫描方式,现在说如何生成自定义酷炫二维码.二维码生成需要使用Google开源库Zxing,Zxing的项目地址:https://github.com/ZBar/ZBar,我们只需要里 ...

  8. phpqrcode生成动态二维码简单实例

    这是一个利用phpqrcode生成动态二维码简单实例,比微信官方提供的接口还要好用.二维码是动态的,不用生成图片,可自定义二维码大小,间隙,跳转地址等. 参数设置: include_once 'php ...

  9. Java生成艺术二维码也可以很简单

    原文点击: Quick-Media Java生成艺术二维码也可以很简单 现在二维码可以说非常常见了,当然我们见得多的一般是白底黑块,有的再中间加一个 logo,或者将二维码嵌在一张特定的背景中(比如微 ...

随机推荐

  1. 基于oslo_messaging的RPC通信

    oslo_messaging源于Openstack的一个经典的模块,用以实现服务间的RPC通信.Client端将数据放入rabbitmq中,server端从消息队列中获取传送数据. oslo.mess ...

  2. ssm 连接两个数据库

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. Android的框架功能说明

    OkHttp网络框架 Picasso图片缓存框架 ORMLite数据库框架 GreenDao数据库框架

  4. 常用的jquerymobil 站点

    http://www.jqmapi.com/api1.2/ Jquery Mobile 中文API站 https://codiqa.com/demo   jquerymobil UI编辑器 https ...

  5. 相对熵（KL散度）

    https://blog.csdn.net/weixinhum/article/details/85064685 上一篇文章我们简单介绍了信息熵的概念,知道了信息熵可以表达数据的信息量大小,是信息处理 ...

  6. Flask总结

    Flask的优缺点 优点:Flask小而精,三方组件全 缺点:稳定性相对较差,三方组件版本问题,Flask一旦迭代,就可能造成三方组件不兼容的问题. flask三剑客 + 小儿子 Django    ...

  7. 201. Bitwise AND of Numbers Range (Bit)

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND(按位与) of all nu ...

  8. 英文谚语：Take that with a grain of salt

    take sth. with a grain of salt 这个习语的字面意思是“和一撮盐一起吃下去”,为什么要与盐一起吃呢? 据说这个习语要追溯到罗马时代,罗马将军庞培曾发现一种解毒剂,必须和着一 ...

  9. 专项测试——移动app安装包检测

    一.背景和现状 安装包的重要性无需多提,针对安装包质量控制越来越严格和规范,包括证书.文件大小.安装成功率等,APP的证书及混淆是影响APP的安装成功率及代码安全性的很大因素,随着功能迭代,安装包也会 ...

  10. python脚本删除文件与目录的命令

    1. 删除文件的命令 import os os.remove(file) os.unlink(file) 2.删除目录的命令 import shutil shutil.rmtree(directory ...