基本信息
源码名称:js在线生成二维码(qrcode)
源码大小:0.08M
文件格式:.zip
开发语言:js
更新时间:2018-03-05
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

<!DOCTYPE html>

<!-- saved from url=(0043)http://localhost:21480/Admin/Plugins/QRCode -->
<html>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Bootstrap二维码在线生成代码</title>
    <link type="text/css" href="bootstrap.min.css" rel="stylesheet">       
    <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body class="indexbody">
<div class="container">
<!--路径导航-->
<div class="row">
<ol class="breadcrumb clearfix">
<li><span>应用管理</span></li>
<li><span>小工具</span></li>
<li><a>二维码生成</a></li>
</ol>
</div>
<!--/路径导航-->

<!--表单-->
<div class="panel panel-sm">
<div class="panel-heading clearfix">
<label><i class="fa fa-bookmark"></i> 二维码生成</label>
</div>
<form action="" class="form-horizontal panel-body" id="form1" method="post">
<ul class="nav nav-tabs nav-tabs-sm" role="tablist" id="mytabs">
<li role="presentation" class="active">
<a href="http://www.mycodes.net" role="tab" data-toggle="tab" id="tab1" aria-controls="pane1"><strong>QRCode Generator</strong></a>
</li>
</ul>
<div class="tab-content" style="padding-top: 15px;">
<div role="tabpanel" class="tab-pane fade in active" id="pane1" aria-labelledby="tab1">
<div class="form-group form-group-sm">
<label class="control-label col-md-2">二维码内容</label>
<div class="col-md-10">
<textarea name="txtContent" id="txtContent" rows="2" class="form-control input-normal" placeholder="http://www.mycodes.net"></textarea>
</div>
</div>

<div class="form-group form-group-sm">
<label class="control-label col-md-2">二维码图像</label>
<div class="col-md-10">
<div id="qrcode"></div>
<p class="m-top-10 text-muted">使用手机扫一扫</p>
</div>
</div>

<div class="form-group form-group-sm">
<div class="col-md-10 col-md-offset-2">
<p class="form-control-static text-danger" id="tips"></p>
</div>
</div>
</div>
</div>
<hr class="sm">
<div class="btn-footer">
<button name="btnCreate" class="btn btn-success" type="button" onClick="f_onCreateQrcode();" title="将根据您填写的内容生成二维码图像">开始生成</button>
<button name="btnClear" class="btn btn-default" type="button" onClick="f_onClearQrcode();" title="清除">清除</button>
</div>
</form>    
</div>
</div>
<!--/主体内容-->

    <!-- Recommended Script Positioning -->
    <script src="js/modernizr-2.8.3.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/qrcode.min.js"></script>
    <script type="text/javascript">
        //二维码内容
        var txtContent = document.getElementById("txtContent"), tips = $("#tips");

        // 设置 qrcode 参数
        var qrcode = new QRCode('qrcode', {
            text: 'www.mycodes.net',
            width: 256,
            height: 256,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });

        //生成二维码图像
        function f_onCreateQrcode() {
            if (!txtContent) {
                return false;
            } else {
                if (!txtContent.value) {
                     tips.html("!请填写<strong>二维码内容</strong>再提交生成");
                } else {
                    // 使用 API
                    qrcode.clear();
tips.empty();
                    qrcode.makeCode(txtContent.value);
                }
                return false;
            }
        }

        //清除二维码内容
        function f_onClearQrcode() {
            if (txtContent) {
                txtContent.value = "www.mycodes.net";
                // 使用 API
                qrcode.clear();
                qrcode.makeCode('请输入二维码内容再生成图像');
            }
        }
    </script>
<div style="text-align:center;">
<p><a href="http://down.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>