叫号系统实现-优快云博客

本文介绍了一个简单的叫号系统的实现方式，使用HTML、CSS和JavaScript构建。该系统通过键盘输入数字来生成或取消号码，并实时更新显示当前号码列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>叫號系統</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        var arr=new Array();
        var Arrnum = new Array();
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

        $(function()
        {
            $('#textareaContext').val("");
            //var nheight =$(document).height();
            //$('#textareaContext').height(nheight-40);
            $('#textareaContext').focus();
            $('#textareaContext')
            .keypress(function(event){

                if((event.keyCode > 47)  && (event.keyCode < 58))
                {
                    arr.push(event.keyCode -48);
                }    
                else if(event.keyCode ==43)
                {    
                    Arrnum.splice(0,Arrnum.length);
                    arr.splice(0,arr.length);
                    $('#textareaContext').val("");
                }
                else if(event.keyCode ==13)
                {
                    var newNum = arr.join("");
                    var arrIndex = Arrnum.indexOf(newNum);
                    if( arrIndex == -1)
                    {
                        Arrnum[Arrnum.length] = newNum;
                    }
                    else
                    {
                        Arrnum.remove(newNum);
                    }                              
                    arr.splice(0,arr.length);
                    $('#textareaContext').val(Arrnum.toString());
                }
                else
                {
                    return true;
                }

            })
            .keyup(function(event){
                return true;   
            });

        });
    </script>
    <style type="text/css">
    *{
        overflow-x:hidden;
        overflow-y:hidden;
        height: 99%;
    }   
    textarea{
        width: 99%;        
        background-color: #000000;
        color: #ffffff;
        overflow:hidden;
        font-size: 80px;        
        border-color: #000000;
    }
</style>
</head>
<body  style="background-color: #000000" ">
    <textarea id="textareaContext" readonly="true">
    </textarea>
</body>
</html>