写一个基于web serial API的代码，要求接收串口的数据并显示在页面上

非常感谢您的问题。根据您的要求，以下是一个基于Web Serial API的接收串口数据并显示在页面上的代码示例：

// 获取页面上的串口数据显示元素
const display = document.querySelector('#serial-display');

// 初始化Serial Port实例
const port = new SerialPort();
const reader = port.readable.getReader();

// 监听串口数据，一旦有新数据到达则进行处理
reader.read().then(({ value, done }) => {
  if (!done) {
    // 将数据转换为文本字符串并添加到页面上的显示元素中
    display.innerText += new TextDecoder().decode(value);
    // 继续监听下一批串口数据
    reader.read().then(({ value, done }) => {
      // 递归调用自身实现无限循环读取串口数据
      if (!done) {
        reader.read().then(({ value, done }) => {
          display.innerText += new TextDecoder().decode(value);
        });
      }
    });
  }
});

// 打开并连接指定的串口
port.open('COM1', { baudRate: 115200 }).then(() => {
  console.log('串口连接已建立');
}).catch((error) => {
  console.log(`串口连接失败: ${error.message}`);
});

此代码将打开并连接串口 `COM1`，使用波特率 `115200` 读取正在连接的设备发送的任何数据，并将其添加到页面上的显示元素中。请注意，这是一个基础示例，需要进行进一步的优化和测试，以确保其在不同设备和操作系统上的兼容性。如果您有任何疑问或需要进一步的帮助，请随时与我联系。