JS生成二维码(兼容各种浏览器及中文)

2023-05-16

本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JS 生成二维码 </title>
<script src="qrcode.js"></script>
<script type="text/javascript">
window.onload = function(){

    // 二维码对象
    var qrcode;

    // 默认设置
    var content;
    var size;

    // 设置点击事件
    document.getElementById("send").onclick =function(){

        // 获取内容
        content = document.getElementById("content").value;
        content = content.replace(/(^\s*)|(\s*$)/g, "");

        // 获取尺寸
        size = document.getElementById("size").value;

        // 检查内容
        if(content==''){
            alert('请输入内容!');
            return false;
        }

        // 检查尺寸
        if(!/^[0-9]*[1-9][0-9]*$/.test(size)){
            alert('请输入正整数');
            return false;
        }

        if(size<100 || size>500){
            alert('尺寸范围在100~500');
            return false;
        }

        // 清除上一次的二维码
        if(qrcode){
            qrcode.clear();
        }

        // 创建二维码
        qrcode = new QRCode(document.getElementById("qrcode"), {
            width : size,//设置宽高
            height : size
        });

        qrcode.makeCode(document.getElementById("content").value);
    }

}
</script>
</head>

<body>
    <p>内容:<input type="text" id="content" value="http://weibo.com/fdipzone" /></p>
    <p>尺寸:<input type="text" id="size" value="150"></p>
    <p><button id="send">生成二维码</button></p>
    <div id="qrcode"></div>
</body>
</html>



这里写图片描述


qrcode.js文件及完整代码下载地址:点击查看

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS生成二维码(兼容各种浏览器及中文) 的相关文章

随机推荐

  • 系统中有两个version的PHP存在,导致phpunit测试出现问题的解决方法

    今天要搭建本机的LAMP 开发环境 xff0c 因系统自带的php版本是5 5 14 xff0c 但开发要使用的是php 5 6 以上 xff0c 因此安装了php 5 6 7 这样导致了系统中有两个版本的php存在 正常开发是没有问题的
  • eclipse 更改编辑器风格方法

    eclipse 更改编辑器风格方法 1 打开eclipse 选择菜单Help gt Install New Software 2 在Work with 中 xff0c 按Add xff0c 然后在Location中填入 xff1a http
  • mongodb 地理位置搜寻

    LBS xff0c 存储每个地点的经纬度坐标 xff0c 搜寻附近的地点 xff0c 建立地理位置索引可提高查询效率 mongodb地理位置索引 xff0c 2d 和2dsphere xff0c 对应平面和球面 1 创建lbs集合存放地点坐
  • php 版本处理类

    php 版本处理类 例如记录app版本 xff0c 或某些版本数据 xff0c 如果使用1 0 0这种版本格式记录入库 xff0c 在需要筛选查询时会比较麻烦 而把版本字符串转为数字保存 xff0c 可以方便版本间的比较和筛选 例如 xff
  • PDO 查询mysql返回字段整型变为String型解决方法

    PDO 查询mysql返回字段整型变为String型解决方法 使用PDO查询mysql数据库时 xff0c 执行prepare execute后 xff0c 返回的字段数据全都变为字符型 例如id在数据库中是Int的 xff0c 查询后返回
  • nginx access.log 忽略favicon.ico访问记录的方法

    favicon ico 文件是浏览器收藏网址时显示的图标 xff0c 当第一次访问页面时 xff0c 浏览器会自动发起请求获取页面的favicon ico文件 当 favicon ico文件不存在时 xff0c 服务器会记录404日志 12
  • php根据地理坐标获取国家、省份、城市,及周边数据类

    功能 xff1a 当App获取到用户的地理坐标时 xff0c 可以根据坐标知道用户当前在那个国家 省份 城市 xff0c 及周边有什么数据 原理 xff1a 基于百度Geocoding API 实现 xff0c 需要先注册百度开发者 xff
  • Mac查看本机IP地址方法

    Mac查看本机IP地址方法 1 使用command 43 shift 43 u 打开实用工具 2 选择 终端 打开 3 输入 ifconfig grep inet grep v 127 0 0 1 显示 inet 开头的那行就是本机的IP地
  • 使用ssh-keygen生成私钥和公钥

    1 使用ssh keygen生成私钥和公钥 命令如下 xff1a ssh span class hljs attribute keygen span span class hljs attribute t span rsa 例子 xff1a
  • 代码简短且隐蔽的后门木马

    本文将介绍一个代码很简短 xff0c 而且很隐蔽的后门木马 xff0c 以便让大家在检测程序时可以避免被挂木马 文件内容如下 xff1a lt php 64 span class hljs variable span 61 span cla
  • H264视频编码原理基础分析

    引言 本文章旨在记录本人学习有关音视频时对H264码流视频编解码原理部分的内容 xff0c 如有不对请留言指出 1 音视频封装格式 我们一般下载或者播放的视频文件常见都是以 xxx mp4 xxx flv xxx mkv等标识结尾 xff0
  • mysql导出查询结果到csv方法

    要将mysql的查询结果导出为csv xff0c 一般会使用php连接mysql执行查询 xff0c 将返回的查询结果使用php生成csv格式再导出 但这样比较麻烦 xff0c 需要服务器安装php才可以实现 直接使用mysql导出csv方
  • MySQL实用工具汇总

    本文收录了mysql相关的实用工具 工具包括 xff1a 性能测试 xff0c 状态分析 xff0c SQL路由 xff0c 及运维开发相关的所有工具 xff0c 并会持续更新 1 工具套件集 percona toolkit oak too
  • php 判断memcache key/value是否存在方法

    1 memcache简介 memcache是一套分布式高速缓存软件 xff0c 用于数据缓存及分布式网站session存储等 使用key 61 gt value方式存储 xff0c 支持数据压缩存储处理及数据过期处理 value只支持str
  • mysql 使用inet_aton和inet_ntoa处理ip地址数据

    本文将介绍如何在数据库中使用合适格式保存ip地址数据 xff0c 并能方便的对ip地址进行比较的方法 1 保存ip地址到数据库 数据库中保存ip地址 xff0c 字段一般会定义为 xff1a span class hljs escape 9
  • git commit 提交注释规范

    本文将介绍使用git commit时的注释规范 xff0c 提高commit内容的可读性及理解 规范说明 xff1a 1 用一空行分隔标题与正文 2 标题使用大写字母 3 标题不超过50个字符 4 标题使用祈使语气 5 标题不要使用句号结尾
  • html5实现摇一摇功能

    原理 xff1a 使用DeviceMotion实现 xff0c 关于DeviceMotion介绍可以查看 https developer mozilla org en US docs Web Reference Events devicem
  • MySql查看与修改auto_increment方法

    本文将介绍如何查看表的auto increment及其修改方法 查看表当前auto increment 表的基本数据是存放在mysql的information schema库的tables表中 xff0c 我们可以使用sql查出 span
  • js遍历获取表格内数据方法

    本文将介绍如何使用js获取表格内某一单元格的内容 xff0c 表格由table tr td等html标记组成 table表示表格 xff0c tr表示行 xff0c td表示行中列 1 一般的表格结构如下 span class hljs t
  • JS生成二维码(兼容各种浏览器及中文)

    本文将介绍如何使用JS生成二维码 xff0c 兼容各种浏览器及手机端 xff0c 支持中文 代码如下 xff1a span class hljs doctype lt DOCTYPE html gt span span class hljs