就餐排号(队列示例)htmlcssJS

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>队列示例</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div id="screen"></div> 
 <div class="actions">
     <button id="createNumber">取号</button>
     <button id="callNumber">叫号</button>
 </div>  
 <div>
    当前号码<span id="newNumber"></span>
 </div>
 <div>
    当前队列<span id="queue"></span>
 </div>
 <script src="./main.js"></script>
</body>
</html>

css

#screen{
    
    border: 1px solid black;
    width: 200px;
    height: 200px;
    background : pink; 
}

const divScreen = document.querySelector('#screen')
const btnCreateNumber = document.querySelector('#createNumber')
const btnCallNumber = document.querySelector('#callNumber') 
const spanNewNumber = document.querySelector('#newNumber')
const spanQueue = document.querySelector('#queue');
 
let n = 0;
let queue = [];
btnCreateNumber.onclick = ()=>{
    n= n+1;
    //queue.push(n);
    queue.push.call(queue,n);
    spanNewNumber.innerText = n;
    spanQueue.innerText = JSON.stringify(queue);//可以把JS里面的字符串变得像数组

}
btnCallNumber.onclick = ()=>{
    //const m =queue.shift 没有call的用法直观
    const m = queue.shift.call(queue);
    if (m === undefined){
     return
    }
    divScreen.innerText = `请${m}号就餐`
    spanQueue.innerText = JSON.stringify(queue);
}