二维码在线生成工具制作日志

2019年08月10日| 作者:策策| 浏览:140次


昨天晚上睡得太晚了

然后呢

整个人都软了

啥也不想干了

就瞎捣鼓了


就捣鼓了一个在线生成二维码的小工具,用的是qrcode.js,其中还是免不了有坑的,多琢磨会就明白了


123.png


先是要引入qrcode.js文件的


HTML:

<textarea title="不能为空,请输入转换内容
如需输入网址,请在网址前加 http://" required id="nr" maxlength="35">http://www.cecebk.cn</textarea>
<br/>
            <a href="javascript:;" id="sc">生成</a>
            <div id="qrcode"></div>


CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

h2 {
    text-align: center;
    line-height: 60px;
    color: #ffffbf;
    background-color: rgba(32, 65, 98, .6);
}

#nr {
    width: 400px;
    height: 150px;
    resize: none;
    padding: 12px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, .6);
}

#sc {
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
    background-color: #fff;
    line-height: 30px;
    color: #000;
    text-decoration: none;
    margin: 15px 0;
}

form {
    margin: 0 auto;
    width: 400px;
    margin-top: 15px;
}

#qrcode {
    margin: 0 auto;
    overflow: auto;
    text-align: center;
    max-width: 400px;
}

#qrcode img {
    margin: 0 auto;
}

@media screen and (max-width: 560px) {
    form {
        width: 92%;
    }

    #nr,
    #qrcode {
        width: 100%;
    }
}

img {
    display: block;
}


JS:

<script src="js/qrCode.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
var qrcode = new QRCode("qrcode");

function makeCode () {      
    var elText = document.getElementById("nr");
    
    if (!elText.value) {
        alert("请输入转换内容");
        elText.focus();
        return;
    }
    
    qrcode.makeCode(elText.value);
}

makeCode();

$("#nr").
on("blur", function () {
    makeCode();
}).
on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});
        </script>


由于今天身体实在是软,代码写的可能有些不严谨,请原谅

使用文档:


sd.png


好了,我要休息了,你们喜欢就试试吧


文章标签:javascript 工具一类

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/33.html)

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表