<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>