扫码枪扫描标签显示标签信息，下一次扫描覆盖上一次。

最新推荐文章于 2023-06-18 14:53:53 发布

码上开发

最新推荐文章于 2023-06-18 14:53:53 发布

阅读量817

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_42408481/article/details/130979113

版权

在使用扫码枪扫描标签时，显示在设备上的标签信息字太小，使用场景下难以核对信息，于是简单做了可方便看到标签信息的网页。如下：

页面效果图：

初始化

第一次扫描

第二次扫描

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
         window.document.onkeydown = (e) => {
            let input = document.getElementById('input');
             let span = document.getElementById('span');
             input.focus()
             if (e.keyCode === 13) {
                 span.innerHTML = input.value;
                 input.value = ''
                   }
            }
    </script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-image: url(./background.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        
    }
    span {
        font-size: 100px;
        text-align: center;
        border-radius: 10px;
        display: block;
        background: #fff;
        height: 120px;
        width:70%;
        line-height: 120px;
        text-align: center;
    }
</style>
<body>
    <div class="box">
        <input  style=" opacity: 0;width: 1px;" id="input"  type="text">
        <span id="span"></span>
    </div>
</body>
</html>