js怎么实现叫号

实现叫号系统的JavaScript方法

叫号系统通常用于医院、银行等场所，以下是一个基于JavaScript的简单实现方案：

HTML部分

<div id="display">当前号码: <span id="currentNumber">0</span></div>
<button id="nextBtn">叫下一个号</button>
<button id="resetBtn">重置</button>

CSS部分

#display {
  font-size: 2em;
  margin: 20px;
}
button {
  padding: 10px 20px;
  margin: 5px;
  font-size: 1em;
}

JavaScript部分

let currentNumber = 0;

document.getElementById('nextBtn').addEventListener('click', function() {
  currentNumber++;
  document.getElementById('currentNumber').textContent = currentNumber;
  speakNumber(currentNumber);
});

document.getElementById('resetBtn').addEventListener('click', function() {
  currentNumber = 0;
  document.getElementById('currentNumber').textContent = currentNumber;
});

function speakNumber(number) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(`请${number}号到窗口办理`);
    utterance.lang = 'zh-CN';
    window.speechSynthesis.speak(utterance);
  } else {
    alert(`请${number}号到窗口办理`);
  }
}

增强版叫号系统功能

对于更复杂的需求，可以考虑以下扩展功能：

添加叫号队列

let queue = [];
let currentNumber = 0;

function addToQueue() {
  queue.push(currentNumber + 1);
  currentNumber++;
  updateQueueDisplay();
}

function callNext() {
  if(queue.length > 0) {
    const nextNumber = queue.shift();
    document.getElementById('currentNumber').textContent = nextNumber;
    speakNumber(nextNumber);
    updateQueueDisplay();
  }
}

function updateQueueDisplay() {
  document.getElementById('queue').textContent = `等待人数: ${queue.length}`;
}

添加叫号音效

function playBeep() {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();

  oscillator.type = 'sine';
  oscillator.frequency.value = 800;
  gainNode.gain.value = 0.1;

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  oscillator.start();
  gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.5);
  oscillator.stop(audioCtx.currentTime + 0.5);
}

服务器端集成方案

对于需要多终端同步的叫号系统，可以结合后端技术：

前端代码

async function callNextNumber() {
  try {
    const response = await fetch('/api/call-next', {
      method: 'POST'
    });
    const data = await response.json();
    updateDisplay(data.currentNumber);
  } catch (error) {
    console.error('叫号失败:', error);
  }
}

function updateDisplay(number) {
  document.getElementById('currentNumber').textContent = number;
  speakNumber(number);
}

后端接口示例(Node.js)

let currentNumber = 0;

app.post('/api/call-next', (req, res) => {
  currentNumber++;
  res.json({ currentNumber });
});

注意事项

• 语音合成功能需要浏览器支持Web Speech API
• 跨终端同步需要服务器支持
• 实际部署时需要考虑网络延迟和并发问题
• 可根据实际需求添加优先号、多窗口叫号等功能