Javascript Clicker 客户队列按钮呼叫密码

Question

我有下面的代码（Javascript 和 HTML）：

function uppass(e) {
    var element = document.getElementById("newclient");
    let value = element.innerHTML.replace(/[^0-9]/g, "");
    ++value;
    let newValue=e.id +'  -  ' +value ;
    document.getElementById("newclient").innerHTML =  newValue;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>
    clicked button in JavaScript
  </title>
</head>

<body style="text-align:center;">
  <header>
    <h1> Clicker customer queue window calling</h1>
  </header>
  <h4><b>For customers</b></h4>
  <center>
    <button id="c" class="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Common </button>
    <button id="f" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Fast </button>
    <button id="p" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;"> Priority </button>
  </center>
  <h5>Your pass is: </h5>
  <h2 id="newclient" style="font-size: 12px; display: inline-block; padding-left: 20px;">0</h5>
<br><br>

<h4><b>Attendant Call</b></h4>

<button id="window1" type="button" onclick="funcao()" style=" font-size: 16px; margin: 0 10px;"> Window 1 </button>
  <button id="window2" type="button" onclick="funcao()" style=" font-size: 16px; margin: 0 10px;"> Window 2 </button>
  <button id="window3" type="button" onclick="funcao()" style=" font-size: 16px; margin: 0 10px;"> Window 3 </button>
  <button id="window4" type="button" onclick="funcao()" style=" font-size: 16px; margin: 0 10px;"> Window 4 </button>
</center>

<br><br>
<h5>Calling password number:</h5><h2 id="newclient" style="font-size: 12px; display: inline-block; padding-left: 20px;">0</h5>

</body>

</html>

我正在尝试让“window”调用在“常用”、“快速”和“优先”按钮中创建的密码。
例如。如果客户端在“Common”、“priority”或“fast”中创建密码，则“window”将调用该密码。
但是我在 javascript 中创建它时遇到了问题，也许是使用数组，以及使用“if”方法，但它也可能是另一种方式。
最难的部分是：
"window1" 调用密码 "Priority" ，如果没有，它调用密码 "Fast"，如果没有，调用密码 "common"，如果没有，它什么也没做。 "window2"和"window3"调用密码"Fast"，如果没有，调用密码"Priority"，如果没有，调用密码"Common"，如果有 none，什么也不做。 "window4" 调用密码"Common"，如果没有，则调用密码"Priority"，如果没有，则调用密码"Fast"，如果没有，则调用密码"Fast" ，它什么都不做。

每个“window”都有自己的按钮。单击按钮时，它验证下一个要调用的密码，在面板上显示密码，显示按钮对应的“window”并将其从队列中删除。如果队列中没有密码，则什么都不做。

有人可以帮忙吗？谢谢

https://jsfiddle.net/ofr8kv05/

上的代码

Answer 1

为每个队列创建数组：

普通=cq[]
快 = fq[]
优先级 = pq[]

每次按下客户密码时，密码都会添加到相应的队列中并显示出来。

每按一次 window，orderedQueue 就会根据规则生成，显示第一个密码，并从 orderedQueue 和匹配的个人 [=40] 中删除=]（cq[]、fq[] 或 pg[]）。

let cq = [] // Common Queue
let fq = [] // Fast Queue
let pq = [] // Priority Queue

function uppass(e) {
    var newClient = document.getElementById("newclient")
    let value = newClient.innerHTML.replace(/[^0-9]/g, "")
    ++value
    
    // Add to appropriate queue
    switch (e.id) {
        case "c": // Common Queue
            cq.push(value)
            break
        case "f": // Fast Queue
            fq.push(value)
            break
        case "p": // Priority Queue
            pq.push(value)
            break
    }
    
    newClient.innerHTML = e.id + ' - ' + value

    //console.log("cq: [" + cq + "]")
    //console.log("fq: [" + fq + "]")
    //console.log("pq: [" + pq + "]")
}

function funcao(e) {
    let orderedQueue = []
    let callClient = document.getElementById("callclient")

    // Build orderedQueue
    switch (e.id) {
        case "window1":
            orderedQueue = pq.concat(fq.concat(cq))
            break
        case "window2": case "window3":
            orderedQueue = fq.concat(pq.concat(cq))
            break
        case "window4":
            orderedQueue = cq.concat(pq.concat(fq))
            break
    }

    if (orderedQueue.length == 0) {
        callClient.innerHTML = "No customers."
    } else {
        firstInQueue = orderedQueue.shift()

        // Remove firstInQueue from queue
        if (firstInQueue == cq[0]) {
            cq.shift()
            fromQueue = "c"
        } else if (firstInQueue == fq[0]) {
            fq.shift()
            fromQueue = "f"
        } else if (firstInQueue == pq[0]) {
            pq.shift()
            fromQueue = "p"
        }

        callClient.innerHTML = fromQueue + " - " + firstInQueue

        //console.log("orderedQueue: [" + orderedQueue + "]")
        //console.log("cq: [" + cq + "]")
        //console.log("fq: [" + fq + "]")
        //console.log("pq: [" + pq + "]")
    }
}

<!DOCTYPE HTML>
<html>

<head>
    <title>
        clicked button in JavaScript
    </title>
</head>

<body style="text-align:center;">
    <header>
        <h1>Clicker customer queue window calling</h1>
    </header>

    <h4><b>For customers</b></h4>

    <button id="c" class="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;">Common</button>
    <button id="f" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;">Fast</button>
    <button id="p" type="button" onclick="uppass(this)" style=" font-size: 16px; margin: 0 10px;">Priority</button>

    <h5>Your pass is:</h5>
    <h2 id="newclient" style="font-size: 12px; display: inline-block; padding-left: 20px;">0</h2>

    <br><br>

    <h4><b>Attendant Call</b></h4>

    <button id="window1" type="button" onclick="funcao(this)" style=" font-size: 16px; margin: 0 10px;">Window 1</button>
    <button id="window2" type="button" onclick="funcao(this)" style=" font-size: 16px; margin: 0 10px;">Window 2</button>
    <button id="window3" type="button" onclick="funcao(this)" style=" font-size: 16px; margin: 0 10px;">Window 3</button>
    <button id="window4" type="button" onclick="funcao(this)" style=" font-size: 16px; margin: 0 10px;">Window 4</button>

    <br><br>

    <h5>Calling password number:</h5>
    <h2 id="callclient" style="font-size: 12px; display: inline-block; padding-left: 20px;">0</h2>
</body>

</html>

Javascript Clicker 客户队列按钮呼叫密码

Javascript Clicker customer queue buttons call the password

html

javascript

queue

jquery

button