当前位置：首页 > JavaScript

js怎么实现叫号

2026-04-07 09:49:21JavaScript

实现叫号功能的方法

在JavaScript中实现叫号功能，可以通过队列（Queue）数据结构来管理号码的顺序。以下是一个简单的实现方法：

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.push(element);
  }

  dequeue() {
    if (this.isEmpty()) {
      return "Queue is empty";
    }
    return this.items.shift();
  }

  isEmpty() {
    return this.items.length === 0;
  }

  size() {
    return this.items.length;
  }
}

const ticketQueue = new Queue();

// 生成号码
function generateTicket() {
  const ticketNumber = Math.floor(Math.random() * 1000) + 1;
  ticketQueue.enqueue(ticketNumber);
  return ticketNumber;
}

// 叫号
function callNext() {
  return ticketQueue.dequeue();
}

前端界面实现

结合HTML和CSS创建一个简单的叫号系统界面：

<div class="ticket-system">
  <h3>排队叫号系统</h3>
  <button id="generateBtn">取号</button>
  <button id="callBtn">叫号</button>
  <div id="currentNumber">当前号码: 无</div>
  <div id="waitingList">等待人数: 0</div>
</div>

<script>
  const generateBtn = document.getElementById('generateBtn');
  const callBtn = document.getElementById('callBtn');
  const currentNumber = document.getElementById('currentNumber');
  const waitingList = document.getElementById('waitingList');

  generateBtn.addEventListener('click', () => {
    const ticket = generateTicket();
    alert(`您的号码是: ${ticket}`);
    waitingList.textContent = `等待人数: ${ticketQueue.size()}`;
  });

  callBtn.addEventListener('click', () => {
    const nextNumber = callNext();
    if (nextNumber !== "Queue is empty") {
      currentNumber.textContent = `当前号码: ${nextNumber}`;
      waitingList.textContent = `等待人数: ${ticketQueue.size()}`;
    } else {
      alert("没有等待的号码");
    }
  });
</script>

数据库集成方案

对于需要持久化存储的场景，可以结合数据库实现：

// 使用MongoDB示例
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/ticket_system');

const ticketSchema = new mongoose.Schema({
  number: Number,
  createdAt: { type: Date, default: Date.now },
  called: { type: Boolean, default: false }
});

const Ticket = mongoose.model('Ticket', ticketSchema);

async function generateTicket() {
  const lastTicket = await Ticket.findOne().sort({ number: -1 });
  const newNumber = lastTicket ? lastTicket.number + 1 : 1;
  const ticket = new Ticket({ number: newNumber });
  await ticket.save();
  return newNumber;
}

async function callNext() {
  const ticket = await Ticket.findOneAndUpdate(
    { called: false },
    { $set: { called: true } },
    { sort: { createdAt: 1 }, new: true }
  );
  return ticket ? ticket.number : null;
}

高级功能扩展

多窗口叫号：可以扩展为多个服务窗口同时叫号，每个窗口维护自己的队列。
优先级队列：实现VIP优先叫号功能，可以创建两个队列分别处理普通和VIP号码。
WebSocket实时更新：使用Socket.io实现实时叫号更新，所有客户端都能即时看到最新叫号信息。
历史记录：存储叫号历史记录，方便后续查询和分析。
声音提示：在叫号时添加语音播报功能，提升用户体验。

// 语音播报示例
function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(utterance);
}

// 在callNext函数中添加
speak(`请${nextNumber}号到窗口办理业务`);

标签: js