@xunuo
2018-08-03T08:22:59.000000Z
字数 14889
阅读 1221
前端
first.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>/*body{min-width: 1000px;overflow-x: auto!important;overflow-y: auto!important;}*/.fontsize {font-size: 16px;}.picsize {position: relative;width: 100%;height: 643px;overflow: hidden;zoom: 1;}.leftbottom {text-align: center;background: #EBF8FF repeat;}.cover_design {position: relative;padding: 0;width: 100%;}.leftbottom i {width: 70px;height: 70px;display: block;margin: 10px auto 5px;}.leftbottom li {width: 20%;height: 150px;margin: 5px auto;display: block;float: left;cursor: pointer;}.righttitle {line-height: 24px;color: #4876FF;font-weight: 500;font-size: 24px;border-left: 4px solid #4876FF;padding 0 6px;margin-top: 5px;}.rightmore {float: right;font-size: 12px;color: #4876FF;}.info1 {margin: 0 0 0 40px;}.rightway {width: 50%;height: 542px;float: right;}.righttop {width: 95%;height: 50%;margin: 0 auto;border: 1px solid #cccccc;padding: 10px 10px;}.rightbottom {width: 95%;height: 100%;margin: 10px auto 0;border: 1px solid #cccccc;padding: 10px 10px;}.rightlist {width: 6px;height: 6px;background: #999999;display: inline-block;float: left;margin-top: 8px;margin-right: 5px;}.ulsize {padding-top: 10px;}.listsize {font-size: 16px;}.listtime {display: inline-block;color: #cccccc;float: right;margin-right: 4px;}.img1 {background: url(https://www.easy-flying.com/source/images/webimg/w13.png) no-repeat;}.img2 {background: url(https://www.easy-flying.com/source/images/webimg/w14.png) no-repeat;}.img3 {background: url(https://www.easy-flying.com/source/images/webimg/w15.png) no-repeat;}.img4 {background: url(https://www.easy-flying.com/source/images/webimg/w16.png) no-repeat;}.img5 {background: url(https://www.easy-flying.com/source/images/webimg/w17.png) no-repeat;}.imgsize {height: 60px;display: block;margin-top: 0px;}.fontinfo1 {height: 26px;display: block;text-align: center;}.fontinfo {font-size: 16px;color: #30373d;font-weight: 600;letter-spacing: 2px;line-height: 30px;}.htpintroduce {display: none;width: 90%;height: 150px;background: rgba(0, 0, 0, 0.8);position: absolute;bottom: 0px;text-align: left;padding: 30px 5%;color: #fff;}.footer_design {background: #FFFFFF;bottom: 0;position: fixed;height: 70px;line-height: 50px;text-align: center;color: #000000;font-size: 13px;width: 100%;margin-top: 20px;left: 0;}.footer_font_design1 {line-height: 85px;height: 50px;}.footer_font_design2 {line-height: 20px;height: 50px;}</style></head><body><!-- 导航栏 --><div><nav style="background-color:#63B8FF"><ul class="right"><li><a class="fontsize" href="#">首页</a></li><li><a class="fontsize" href="#">APP</a></li><li><a class="fontsize" href="news.html">新闻</a></li><li><a class="fontsize" href="#">公告</a></li><li><a class="fontsize" href="#">资料</a></li><li><a class="fontsize" href="#">联系我们</a></li><li><a class="fontsize" href="#">注册</a></li><li><a class="fontsize" href="#">登录</a></li></ul></nav></div><br><!-- 图片轮换 --><div class="col-sm-6"><div id="myCarousel" class="carousel slide picsize"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="http://pic21.photophoto.cn/20111106/0020032891433708_b.jpg" alt="First slide" style="height: 643px; width: 100%;"></div><div class="item"><img src="http://pic5.photophoto.cn/20071228/0034034901778224_b.jpg" alt="Second slide" style="height: 643px; width: 100%;"></div><div class="item"><img src="http://pic21.photophoto.cn/20111106/0020032891433708_b.jpg" alt="Third slide" style="height: 643px;width: 100%;"></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><div class="leftbottom" style="width:100%;height:150px;"><ul><li><!-- <img src="https://www.easy-flying.com/source/images/webimg/w13.png"></i>--><div class="cover_design" id="cover1"><i class="img1"></i><span class="imgsize"><span class="fontinfo1 fontinfo">协同管理</span></span><div class="htpintroduce" id="htp1">紧密结合民航最新政策法规<br>监管部门协同管理</div></div></li><li><div class="cover_design" id="cover2"><i class="img2"></i><span class="imgsize"><span class="fontinfo1 fontinfo">方便使用</span></span><div class="htpintroduce" id="htp2">无论在办公室还是室外，随时通过电脑，手机管理和监视飞行器</div></div></li><li><div class="cover_design" id="cover3"><i class="img3"></i><span class="imgsize"><span class="fontinfo1 fontinfo">实时反馈</span></span><div class="htpintroduce" id="htp3">结合空域数据，实现飞行器飞行全过程实时监视，自动告警</div></div></li><li><div class="cover_design" id="cover4"><i class="img4"></i><span class="imgsize"><span class="fontinfo1 fontinfo">云端存储</span></span><div class="htpintroduce" id="htp4">实现飞行服务数据云存储</div></div></li><li><div class="cover_design" id="cover5"><i class="img5"></i><span class="imgsize"><span class="fontinfo1 fontinfo">数据接入</span></span><div class="htpintroduce" id="htp5">支持互联网/2G/3G/4G/ADS-B/北斗/雷达等多种链路数据接入</div></div></li></ul></div></div><div class="rightway col-sm-6"><div class="righttop"><h2 class="righttitle">公司简介<a class="rightmore" href="#">查看更多>></a></h2><p class="info1"></p></div><div class="rightbottom"><h2 class="righttitle">新闻<a class="rightmore" href="news.html">查看更多>></a></h2><ul class="ulsize" id="newslist"></ul></div></div><div class="footer_design"><div class="footer_font_design1">COPYRIGHT 2017-2018 海航通航飞行服务系统</div><div class="footer_font_design2">琼ICP备17000540号</div></div><script>$(document).ready(function() {$("#cover1").mouseover(function() {$("#htp1").show();});$("#cover1").mouseout(function() {$("#htp1").hide();});$("#cover2").mouseover(function() {$("#htp2").show();});$("#cover2").mouseout(function() {$("#htp2").hide();});$("#cover3").mouseover(function() {$("#htp3").show();});$("#cover3").mouseout(function() {$("#htp3").hide();});$("#cover4").mouseover(function() {$("#htp4").show();});$("#cover4").mouseout(function() {$("#htp4").hide();});$("#cover5").mouseover(function() {$("#htp5").show();});$("#cover5").mouseout(function() {$("#htp5").hide();});var getScenemapData = function() {var jsondata = {};$.getJSON("test.json", function(data, status) {console.log("是是不是成功读到数据" + status);if(status == 'success') {jsondata = data;$(".info1").html(data.introduce);for(var i = 0; i < 5; i++) {var ul = document.getElementById("newslist");var li = document.createElement("li");var span1 = document.createElement("span");var span2 = document.createElement("span");var a = document.createElement("a");a.setAttribute("class", "listsize");a.setAttribute("href", "#");a.setAttribute("target", "_blank");a.innerHTML = data.news[i].things;span1.setAttribute("class", "rightlist");span2.setAttribute("class", "listtime");span2.innerHTML = data.news[i].time;li.appendChild(span1);li.appendChild(a);li.appendChild(span2);ul.appendChild(li);}return jsondata;} else {console.log("没有读取到本地文件：" + status);return false;}});}getScenemapData();});</script></body></html>
news.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>新闻</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>.fontsize {font-size: 16px;}.bodysize {width: 80%;margin: 0 auto;font-align: center;min-width: 100px;overflow-x: auto!important;overflow-y: hiden!important;}.tabledesign {margin: 1px auto;}.caption_design {text-align: center;font-size: 16px;font-weight: 900;}.tablesize {width: calc(100%-200%);display: inline-block;overflow: hidden;text-overflow: ellipsis;text-indent: 10px;}.biaodandesign {position: absolute;bottom: 0;width: 100%;height: 15%;text-align: center;font-size: 16px;}.footer_design {background: #FFFFFF;bottom: 0;position: fixed;height: 70px;line-height: 50px;text-align: center;color: #000000;font-size: 13px;width: 100%;margin-top: 20px;left: 0;}.footer_font_design1 {line-height: 85px;height: 50px;}.footer_font_design2 {line-height: 20px;height: 50px;}</style></head><body><!-- 导航栏 --><div><nav style="background-color:#63B8FF"><ul class="right "><li><a class="fontsize" href="first.html">首页</a></li><li><a class="fontsize" href="#">APP</a></li><li><a class="fontsize" href="news.html">新闻</a></li><li><a class="fontsize" href="#">公告</a></li><li><a class="fontsize" href="#">资料</a></li><li><a class="fontsize" href="#">联系我们</a></li><li><a class="fontsize" href="#">注册</a></li><li><a class="fontsize" href="#">登录</a></li></ul></nav></div><div><div class="bodysize"><table id="mytable" class="table table-bordered table-striped"><caption class="caption_design">新闻列表</caption><thead><tr><th style="text-align: center;">序号</th><th style="text-align: center;">名称</th><th style="text-align: center;">时间</th></tr></thead><tbody id="tbodyinfo"></tbody></table></div><div class="biaodandesign"><!--<input id="pagesize" type="text" size="1" maxlength="2" value="getDefaultValue()" /><a>条</a>;--><button class="btn btn-primary" href="#" id="btn1">首页</button><button class="btn btn-primary" id="btn2">上一页</button><button id="btn0" class="btn btn-info" disabled="disabled"><span></span></button><button class="btn btn-primary" href="#" id="btn3">下一页</button><button class="btn btn-primary" href="#" id="btn4">尾页</button><!--<ul class="pagination" id="biaodan"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul>--></div><br></div><div class="footer_design"><div class="footer_font_design1">COPYRIGHT 2017-2018 海航通航飞行服务系统</div><div class="footer_font_design2">琼ICP备17000540号</div></div><script>var pageSize = 15; //每页显示的记录条数var curPage = 0; //当前页var lastPage; //最后页var direct = 0; //方向var len = 0; //总行数var page; //总页数var begin;var end;$(document).ready(function() {var getScenemapData = function() {var jsondata = {};$.getJSON("test.json", function(data, status) {console.log("是是不是成功读到数据" + status);if(status == 'success') {jsondata = data;var num = 0;for(var i = 0; i < data.news.length; i++) {var tbody = document.getElementById("tbodyinfo");var tr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var a = document.createElement("a");a.setAttribute("href", "newsinfo.html");a.setAttribute("target", "_blank");a.innerHTML = data.news[i].things;td1.innerHTML = ++num;td1.setAttribute("style", "text-align: center;");td2.appendChild(a);td2.setAttribute("style", "text-align: center;");td3.innerHTML = data.news[i].time;td3.setAttribute("style", "text-align: center;");tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tbody.appendChild(tr);len++;/*if(i%17==0){var ul=document.getElementById("biaodan");var li=document.createElement("li");var a=document.createElement("a");a.setAttribute("href","#");a.innerHTML=i/17;li.appendChild(a);ul.appendChild(li);}*/}page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1;console.log(len + " " + pageSize + " " + page);curPage = 1; //设置第一页为当前页面displayPage(1); //显示第一页document.getElementById("btn0").innerHTML = "当前" + curPage + "/"+ page + "页";$("#btn1").click(function firstPage() {curPage = 1;direct = 0;displayPage();});$("#btn2").click(function frontPage() {direct = -1;displayPage();});$("#btn3").click(function nextPage() {direct = 1;displayPage();});$("#btn4").click(function lastPage() {curPage = page;direct = 0;displayPage();});return jsondata;} else {console.log("没有读取到本地文件：" + status);return false;}});}getScenemapData();function displayPage() {if(curPage <= 1 && direct == -1) {direct = 0;return;} else if(curPage >= page && direct == 1) {direct = 0;return;}lastPage = curPage;if(len > pageSize) {curPage = ((curPage + direct + len) % len);} else {curPage = 1;}document.getElementById("btn0").innerHTML = "当前" + curPage + "/" + page + "页";begin = (curPage - 1) * pageSize + 1;end = begin + 1 * pageSize - 1;if(end > len) end = len;$("#mytable tr").hide();$("#mytable tr").each(function(i){if(i>=begin&&i<=end||i==0){$(this).show();}});}});</script></body></html>
test.json
{"introduce":"海南海航通航低空飞行服务有限公司是海航通航产业模块中的重要组成，立足海南岛，建立了覆盖海南省全岛大部的低空飞行服务网络，是海航集团旗下专业的通航飞行服务提供商。致力于为广大通航用户提供通航飞行计划申报和审批手续代办、低空飞行监视服务、航行情报和低空气象服务、飞行姿态和数据记录回放等服务。同时，公司正在申请无人机云系统资质，届时将为广大无人机生产制造商和运营商合法运行提供服务。","news":[{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"},{"things":"第9条新闻","time":"2018-02-02"},{"things":"第10条新闻","time":"2018-03-03"},{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"},{"things":"第9条新闻","time":"2018-02-02"},{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"},{"things":"第9条新闻","time":"2018-02-02"},{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"},{"things":"第9条新闻","time":"2018-02-02"},{"things":"第10条新闻","time":"2018-03-03"},{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"},{"things":"第9条新闻","time":"2018-02-02"},{"things":"第一条新闻","time":"2018-01-01"},{"things":"第二条新闻","time":"2018-02-02"},{"things":"第三条新闻","time":"2018-03-03"},{"things":"第四条新闻","time":"2018-04-04"},{"things":"第5条新闻","time":"2018-01-01"},{"things":"第6条新闻","time":"2018-02-02"},{"things":"第7条新闻","time":"2018-03-03"},{"things":"第8条新闻","time":"2018-01-01"}]}