html 和 js 读取条码实例

在HTML和JS中读取条码的实例非常简单。首先，我们需要在HTML中创建一个按钮或者输入框，用户可以通过点击按钮或者输入数字码来读取条码。然后，我们需要在JS中编写代码来实现读取条码的功能。

在HTML中，可以创建一个按钮来触发读取条码的操作，例如：

<button id="scanButton">扫描条码</button>

在JS中，我们可以使用现成的第三方库来实现读取条码的功能，例如使用Quagga.js库。首先，我们需要引入Quagga.js库，然后编写相应的代码来实现读取条码的功能：

// 引入Quagga.js库
<script src="https://cdn.jsdelivr.net/npm/quagga"></script>

// 监听按钮点击事件
document.getElementById('scanButton').addEventListener('click', function() {
  // 调用Quagga.js库的API来开始读取条码
  Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream",
      target: document.querySelector('#barcodeScanner')
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function(err) {
    if (err) { 
      console.log(err); 
      return 
    }
    console.log("开始扫描...");
    Quagga.start();
  });

  // 监听条码读取完成事件
  Quagga.onDetected(function(result) {
    console.log("条码数据: " + result.codeResult.code);
    // 可以在此处对读取到的条码数据进行进一步处理
  });
});

这样，当用户点击按钮时，Quagga.js库便会开始读取条码，并且当条码读取完成时，会触发相应的回调函数来处理读取到的条码数据。通过以上的HTML和JS代码，便可以轻松实现条码读取的功能。