前端：加载本地txt文件显示其中的聊天记录

目录结构

样式

/**additional.css**/
#box{ width:200px; height:200px; background:orange; position:absolute; left:0; top:0;}

.f-cb{ zoom:1;}
.f-cb:after,.f-cb:before{ clear:both; content:""; display:table; height:0; }


ul{ list-style:none;}

/*聊天界面的样式*/
.m{ width:700px; padding:20px; border:1px solid  #ccc; margin:10px auto; overflow:hidden;}
.m1 { position:relative; }
.m1:after,.m1:before { clear:both; content:""; display:table; height:0; margin-bottom:20px;}
.m1 dt a{ width:40px; height:30px; background:#CCC; display:inline-block; text-align:center; line-height:30px; }
.m1 dd{ max-width:55%; border:1px solid #ccc; border-radius:3px; padding:10px ;  background:#ccc; box-sizing:border-box; position:relative;}
.m1 dd:before{ position:absolute; bottom:5px;  content:""; border-width:10px; border-style:solid; }
.m1.he dd:before,.m1.vhe dd:before{ left:-20px; border-color:transparent #ccc  transparent transparent;   }
.m1.me dd:before,.m1.vme dd:before{ right:-20px; border-color:transparent  transparent transparent  #ccc; }
.m1.he dt { float:left; }
.m1.he dd{ margin-left:20px; margin-top:20px ;float:left; }
.m1.me dt { float:right; margin-left:20px;}
.m1.me dd { float:right; margin-top:20px;}

.m1.he dt a{ float:left; }
.m1.he dt span{ display:block; float:left;  margin-right:-200px; color:#666; margin-left:20px;}

.m1.me dt a{ float:right; }
.m1.me dt span{ display:block; float:right;  margin-left:-200px; color:#666; margin-right:20px;}


.m1.vhe dt a{ position:absolute; bottom:0; }
.m1.vhe dt span{ padding-left:80px; }
.m1.vhe dd{ margin-left:80px; margin-top:5px;}

.m1.vme dt a{ position:absolute; bottom:0; right:0;}
.m1.vme dt span{ padding-right:80px; text-align:right; display:block; }
.m1.vme dd{ margin-right:80px; margin-top:5px; float:right;}

a:link,a:visited {
    color: black;
    text-decoration: none;
}
a:hover,a:active {
    text-decoration: underline;
}
.m02{ width:318px; border:1px solid #999; margin-left:20px;  }
.m2 li{ clear:both; display:table; padding-left:20px;}
.m2{ width:168px;  }
.m2 li a{float:left; max-width:168px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.m2 li span{ float:left; padding-left:10px; margin-right:-100px;}

/*input 控件的样式*/
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

页面

<html>
<head>
    <link rel="stylesheet" href="./css/additional.css" type="text/css"/>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <div id="content" style="margin-left: 10px">
        <a class="file" href="http://xxxxx.com/log.txt.gz">下载日志文件:log.txt.gz</a>
        <a class="file" href="javascript:;" style="margin-top: 5px">选择文件
            <input  name="" type="file" id="file" onchange="read_txt()">
        </a>
        </br>
        <!-- 这里是分页显示 -->
    
    
    </div>
    
    
    <div class="m" style="font-size:8px;width: 94%;height:86%;overflow: auto; overflow-x:hidden;" id="tt" onscroll="loadMore()">
        <dl class="he m1">
            <dt><a>玩家</a><span>2015-09-11</span></dt>
        <dd>如何使用该功能</dd>
        </dl>
        <dl class="me m1">
            <dt><a>小易</a><span>2015-09-11</span></dt>
            <dd>点击.gz文件下载到本地后解压，点击选择文件选择解压出的日志文件.txt即可</dd>
        </dl>

    </div>

    <script>
      function jump(page) {
          alert('here')
          var tt = document.getElementById("tt")
          var tmp = ''
          var begin = (page-1) * 2000
          var end = page * 2000
          for(var i = begin;i < end && i < window.arr.length;i++){
                if(window.arr[i].indexOf("接收消息") != -1){
                        var htmlData =   '<dl  class="he m1">'
                                       + '   <dt><a>玩家</a><span>'+arr[i].substring(0,19)+'</span></dt>'
                                       + '   <dd>'+arr[i].substring(arr[i].indexOf("接收消息")+4)+'</dd>'
                                       + '</dl>';

                        tmp +=htmlData
                }else{
                        var htmlData =   '<dl  class="me m1">'
                                           + '   <dt><a>小易</a><span>'+arr[i].substring(0,19)+'</span></dt>'
                                           + '   <dd>'+arr[i].substring( arr[i].indexOf("发送消息")+4)+'</dd>'
                                           + '</dl>';
                        tmp +=htmlData

                }
          }
          tt.innerHTML = tmp
      }
      function read_txt() {
          var file = document.getElementById("file").files[0];
          var reader = new FileReader();
          reader.readAsText(file);
          reader.onload = function (data) {
              var tt = document.getElementById("tt")
              var cc = document.getElementById("content")
              var tmp = ''
              window.arr  =this.result.split('\n')
              var num = Math.ceil(arr.length / 2000)
              for(var i = 0;i < num;i++){
                  var htmlData =   '<a  class="file" onclick="jump('+(i+1)+')"> 第'
                                            + (i+1)
                                           + '页 </a>';
                  cc.innerHTML += htmlData
              }
              for(var i = 0;i < 2000;i++){
                    if(arr[i].indexOf("接收消息") != -1){
                            var htmlData =   '<dl  class="he m1">'
                                           + '   <dt><a>玩家</a><span>'+arr[i].substring(0,19)+'</span></dt>'
                                           + '   <dd>'+arr[i].substring(arr[i].indexOf("接收消息")+4)+'</dd>'
                                           + '</dl>';

                            tmp +=htmlData
                    }else{
                            var htmlData =   '<dl  class="me m1">'
                                               + '   <dt><a>小易</a><span>'+arr[i].substring(0,19)+'</span></dt>'
                                               + '   <dd>'+arr[i].substring( arr[i].indexOf("发送消息")+4)+'</dd>'
                                               + '</dl>';
                            tmp +=htmlData

                    }
              }
              tt.innerHTML = tmp
          }
      }
    </script>
<body>
</html>

效果

posted @ 2017-09-05 19:20  桃源仙居  阅读(362)  评论(0)    收藏  举报