关闭

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

标签: js二维码浏览器手机中文
17378人阅读 评论(7) 收藏 举报
分类:

本文将介绍如何使用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文件及完整代码下载地址:点击查看

4
0

猜你在找
深度学习基础与TensorFlow实践
【在线峰会】前端开发重点难点技术剖析与创新实践
【在线峰会】一天掌握物联网全栈开发之道
【在线峰会】如何高质高效的进行Android技术开发
机器学习40天精英计划
Python数据挖掘与分析速成班
微信小程序开发实战
JFinal极速开发企业实战
备战2017软考 系统集成项目管理工程师 学习套餐
Python大型网络爬虫项目开发实战(全套)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    微博
    微信公众号
    微信分享公众平台-破晓领域
    破晓领域
    微信号:fdipzone-idea
    名称:破晓领域

    个人资料
    • 访问:6084786次
    • 积分:42311
    • 等级:
    • 排名:第81名
    • 原创:266篇
    • 转载:24篇
    • 译文:0篇
    • 评论:402条
    博客专栏
    最新评论