对比工具

<html>
<head>
    <title>对比工具</title>
    
    <style>
        html,body{padding:0;margin:0;}
        blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{font:14px/1.5 tahoma,arial,'Hiragino Sans GB',5b8b4f53,sans-serif;padding:0;margin:0;}
        ul,li{list-style:inside; list-style-type:decimal; padding:0;margin:0;}
        
        .clear:after{content:' ';display:block;clear:both;}
        .inner{margin:10px;}
        .red{color:red;}
        .green{color:green;}
        .gray{color:gray;}
        
        .wrap{width:100%;}
        .w1000{width:1000px; margin:0 auto;}
        .nav{position: relative;z-index: 100;clear: both;height: 50px;background: #0087b4;font-size: 12px;min-width: 990px;}
        .nav h1{padding: 0 20px;display: inline-block; height: 50px; line-height:50px; color: #fff;font-size: 16px;font-weight:bold; background-color:#09C;}
        
        .nav .count{float:right;height: 50px; line-height:50px;color: #fff; }
        
        .layout{margin-top:10px;}
        .left{float:left; width:34%;background-color:#FF9; }
        .right{margin-left:36%; background-color:#FF9; overflow:hidden;}
        .left50{width:49%;}
        .right50{margin-left:50%;}
        
        .step{font-size:14px; font-weight:bold;}
        textarea{display:block;width:100%; }
        .btn{display:inline-block; padding:10px 15px; background-color:#09C; color:#fff; cursor:pointer;}
        .btn:hover{background-color:#06a;}
        .btn:active{background-color:#66a;}
        
        .order-list{background-color:#fff;}
        .order-list li{padding:10px; margin-bottom:1px;background-color:#f7f7f7;}
        .order-list li.ok{background-color:green;color:#fff;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="nav clear">
            
            <div class="w1000">
                <h1>对比工具</h1>
                <div class="count ">共扫描 <span id="J_Total">0</span> 个包裹</div>
            </div>
            
        </div>
    </div>
    
    <div class="w1000">
        <div class="layout clear">
            <div class="left">
                <div class="inner">
                    <h1 class="step">第一步, 输入统计数据</h1>
                </div>
                <div class="inner">
                    <textarea rows="15" id="J_Record" placeholder="在此输入统计数据"></textarea>
                </div>
                <div class="inner">
                    <a class="btn OP_Set">提交</a> <span class="gray">(一行一个)</span>
                </div>
            </div>
            <div class="right">
                <div class="inner">
                    <h1 class="step">第二步, 开始扫描</h1>
                </div>
                <div class="inner clear">
                    <div class="left">
                        <ul class="order-list">
                            <li class="ok">e</li>
                            <li>e</li>
                        </ul>
                    </div>
                    <div class="right clear">
                        <input type="text" id="OP_Scan" style="padding:10px;font-size:18px;100%;" placeholder="开始扫描" />
                        <br><br>
                        <div class="left left50">
                            <b>存在的单号</b>
                            <ul class="green" id="J_OK">
                                <li>e</li>
                            </ul>
                        </div>
                        <div class="right right50">
                            <b>不存在的单号</b>
                            <ul class="red" id="J_NOTOK">
                                <li>e</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div></div>

    </div>
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script>
        var total = window.localStorage ? (window.localStorage.getItem('_scan_total') - 0):0;
        $('#J_Total').html(total);
        var arr = [];
        var okArr = [];
        var notokArr = [];
        $('.OP_Set').click(function(){
            var data = $('#J_Record').val().replace(/[^0-9a-zA-Z]+/g, ',').split(',');
            arr = [];
            okArr = [];
            notokArr = [];
            console.info(data.length)
            //
            var html='';
            $.each(data, function(){
                if(this && this.length>0){
                    arr.push(this);
                    html+='<li>'+this+'</li>';
                }
                    
            })
            if(html.length < 1){
                alert('请输入统计数据!!');
                return;
            }
            $('#J_Record').val('');
            $('#J_OK').empty();
            $('#J_NOTOK').empty();
            $('.order-list').html(html);
        });
        
        $('#OP_Scan').keydown(function(e){
            if(e.which == 13){
                var code = $(this).val();
                if(!code || code.length < 1){
                    return;
                }
                var ok=false;
                console.info(code)
                $.each(arr, function(i){
                    if(code == this){
                        var $i = $('.order-list li').eq(i);
                        if(!$i.is('.ok')){
                            $('.order-list li').eq(i).addClass('ok');
                            $('#J_OK').prepend('<li>' + this + '</li>');
                            okArr.push(this);
                        }
                        ok = true;
                    }
                });
                $(this).val('');
                if(!ok && $.inArray(code, notokArr) < 0){
                    $('#J_NOTOK').prepend('<li>' + code + '</li>');
                    notokArr.push(code);
                }
                total++;
                window.localStorage && window.localStorage.setItem('_scan_total', total);
                $('#J_Total').html(total);
            }
        });
        
        
        
    </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sanshizi/p/5465265.html