qrcode.html - 魔力之所Wiki

登录白背景

源码 raw link

二维码生成

信息：宽度：高度：暗色：亮色：级别：

body {
    font-family: 'PingFang SC','Hiragino Sans GB','Microsoft Yahei',Helvetica,sans-serif;
}

.wrapper {

}

.wrapper h3 {
    /*text-align: center;*/
    margin-top: 20px;
}

#qrcode {
    width: 128px;
    height: 128px;
    /*margin: 20px auto 0 auto;*/
    border: 1px solid #cccccc;
}

.wrapper p {
    text-align: center;
    font-size: 14px;
    margin-top: 35px;
}
#form{
    width:210px;
    /*margin:auto;*/
}
#correctLevel{
    width:140px;
}
	</style>
<div class="wrapper">
	<h3>二维码生成</h3>
	<div id="qrcode"></div>
    <div id="form">
        <span>信息：</span><input type="text" id="text" value="http://moozik.cn" />
        <span>宽度：</span><input type="text" id="width" value="128" />
        <span>高度：</span><input type="text" id="height" value="128" />
        <span>暗色：</span><input type="text" id="colorDark" value="#0f0f0f" />
        <span>亮色：</span><input type="text" id="colorLight" value="#f0fff0" />
        <span>级别：</span><select id="correctLevel">
            <option value="3">Q</option>
            <option value="2">H</option>
            <option value="1">L</option>
            <option value="0">M</option>
        </select>
        <input type="button" id="generate" value="生成" />
    </div>
</div>
<script src="https://jizhang.nosdn.127.net/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="https://jizhang.nosdn.127.net/qrcode.min.js" charset="utf-8"></script>
<script type="text/javascript">
        $('#generate').click(function(){
            $("#qrcode").html('');
            var dict = {
                text: $("#text").val(),
                width: parseInt($("#width").val()),
                height: parseInt($("#height").val()),
                colorDark : $("#colorDark").val(),
                colorLight : $("#colorLight").val(),
                correctLevel : parseInt($("#correctLevel").val())
            };
            var qrcode = new QRCode("qrcode", dict);
        });
    </script>