nice哦
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <title>小说下载器</title> <meta name="keywords" content="小说下载器,小说在线搜索,小说引擎"> <meta name="description" content="小说引擎在线搜索,支持小说下载"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> body,html{width:100%;height:100%;font-family:"Open Sans",sans-serif;} body{background-color:#f1f2f6;color:#000;font-size:14px;} *{box-sizing:border-box;margin:0;padding:0;} *,::after,::before{box-sizing:border-box;} h1,h2,h3,h4,h5,h6{font-weight:400;} ul,li{list-style:none;} button,input,select,textarea{outline:0;} a{color: #000;text-decoration: none;} img{max-width: 100%; vertical-align: middle;} /** ---------------------------------- * 头部 -------------------------------------- **/ .header{overflow:hidden;width:100%;height:45px;border-bottom:1px solid #d4d4d4;background-color:#fff;line-height:45px;margin-bottom: 10px;} .header_content{overflow:hidden;margin:auto;padding:0 10px;width:1024px;max-width:100%;} .header_content .logo img{margin-top:-2px;height:35px;} /** ---------------------------------- * 内容 -------------------------------------- **/ .container{margin:auto;padding:0 10px;width:1024px;max-width:100%;min-height: calc(100vh - 123px);} .container{position:relative;overflow:hidden;} /*工具内容*/ .tool,.explain{position:relative;overflow:hidden;border:1px solid #eee;border-radius:4px;background-color:#fff;} .tool h1,.explain h1{padding:5px 10px;border-bottom:1px solid #eee;color:#555;font-size:16px;} .tool .tool_content,.explain .explain_content{position:relative;overflow:hidden;padding:10px;} .tool_content .search{display:flex;overflow:hidden;width:100%;border-radius:5px;font-size:16px;} .tool_content .search input{padding:0 15px;width:100%;height:40px;border:1px solid #d4d4d4;border-right:0;border-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0;background-color:hsla(0,0%,100%,.9);line-height:40px;} .tool_content .search button{width:80px;height:40px;border:1px solid transparent;border-radius:5px;border-bottom-left-radius:0;border-top-left-radius:0;background-color:#e91e63;color:#fff;line-height:40px;cursor:pointer;border-left-color:#e91e63;} .explain{margin-top: 10px;} .explain_content p{color:#555;line-height:1.5;} .explain_content p+p{padding-top:10px;} .explain_content p em{position:relative;display:inline-block;margin-right:5px;width:9px;height:9px;border-radius:50%;background-color:#e91e63;} /*loader*/ .preloader{position:fixed;top:0;left:0;z-index:3;width:100%;height:100%;background-color:rgba(55,58,71,.8);} .loader{position:relative;top:50%;left:50%;display:block;margin:-75px 0 0 -75px;width:150px;height:150px;border:3px solid transparent;border-radius:50%;border-top-color:#9370db;animation:spin 2s linear infinite;} .loader:before{top:5px;right:5px;bottom:5px;left:5px;border-top-color:#ba55d3;animation:spin 3s linear infinite;} .loader:after,.loader:before{position:absolute;border:3px solid transparent;border-radius:50%;content:"";} .loader:after{top:15px;right:15px;bottom:15px;left:15px;border-top-color:#f0f;animation:spin 1.5s linear infinite;} @keyframes spin{0%{transform:rotate(0);-ms-transform:rotate(0);} to{transform:rotate(360deg);-ms-transform:rotate(360deg);} } /** ---------------------------------- * 底部 -------------------------------------- **/ .footer{overflow:hidden;border-top:1px solid #d4d4d4;background-color:#fff;margin-top:10px;} .footer_content{margin:auto;padding:10px;width:1024px;max-width:100%;color:#555;text-align:center;font-size:12px;} .footer_content p+p{margin-top:5px;} .footer_content a{margin-left:5px;color:#555;} /** ---------------------------------- * 自适应 -------------------------------------- **/ @media (max-width:768px){ .container{min-height: calc(100vh - 113px);} .header{line-height: 35px;height: 35px;text-align: center;} .header_content .logo img{margin-top:-2px;height:25px;} } /*搜索模块*/ .explain .book_so{display: flex;} .explain .book_so span em{margin-left: 5px; color: #FF5722;font-style: normal;} .explain .book_so span+span {margin-left: auto;color: #009688;font-size: 12px; margin-top: 4px;} .book_list{overflow:hidden;margin:0 -10px;padding:10px;border-bottom:1px dashed #ddd;} .book_list:first-child{padding-top:0;} .book_list:last-child{padding-bottom:0;border-bottom:0;} .book_list .book_title{overflow:hidden;margin-bottom:5px;} .book_list .book_title a{color:#555;} .book_list .book_title a span{display:inline-block;margin-right:8px;padding:0 8px;height:18px;border-radius:5px;background-color:#03a9f4;color:#fff;text-align:center;font-size:12px;line-height:16px;} .book_list .book_meta{color:#555;font-size:12px;} .book_list .book_meta span+span{margin-left:15px;} #book_next{cursor: pointer;text-align: center;margin-top: 10px;color: #009688;font-size: 16px; font-weight: 700;} /*下载信息*/ .down_book_header{position:relative;overflow:hidden;height:134px;} .down_book_header .pic{float:left;margin-right:10px;} .down_book_header .pic img{width:100px;height:134px;} .down_book_header .book_news h2{overflow:hidden;margin-bottom:5px;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:22px;} .down_book_header .book_news p{font-size:12px;} .down_book_header .book_news p+p{margin-top:5px;padding-top:0;} .down_book_info{position:relative;overflow:hidden;margin-top:10px;color:#555;font-size:12px;line-height:1.5;} .down_book_info .down_url{display:inline-block;margin-top:10px;width:100%;height:30px;border-radius:4px;background-color:#009688;color:#fff;text-align:center;font-size:14px;line-height:30px;} </style> </head> <body> <div class="header"> <div class="header_content"> <a href="http://lanyou.vip/" title="蓝优工具" class="logo"><img src="http://tool.lanyou.vip/public/logo.png" alt="logo"></a> </div> </div> <div class="container"> <div class="tool"> <h1>小说下载器</h1> <div class="tool_content"> <div class="search"> <input type="text" id="txt" placeholder="请输入小说书名"> <button type="submit">搜索</button> </div> </div> </div> <div class="explain"> <h1>使用说明</h1> <div class="explain_content"> <p><em></em>输入需要查询的小说书名进行搜索</p> <p><em></em>再次查询同样书名请刷新后搜索</p> </div> </div> </div> <div id="load"></div> <div class="footer"> <div class="footer_content"> <p>©2020<a href="http://lanyou.vip/" title="">蓝优工具</a></p> <p>如本站的内容对您的权利造成了影响,请告知本站删除.</p> </div> </div> <script> var Apiurl = "https://api.moxu.cc/api/book.php"; $(document).on("click","#book_down", function(){ var dataid =$(this).attr('data-id'); $.ajax({ url: Apiurl, type: 'post', dataType: 'json', data: {action: 'down',do: dataid}, beforeSend: function(xhr){$("#load").html('<div class="preloader"><div class="loader"></div></div>');}, success: function(data) { if (data.code == 200) { var json = data.data; var mkhtml = '<h1>下载信息</h1><div class="explain_content"><div class="down_book_header"><div class="pic"><img src="'+json.pic+'"></div><div class="book_news"><h2>'+json.title+'</h2><p>作者:'+json.author+'</p><p>类型:'+json.type+'</p><p>状态:'+json.state+'</p><p>最新:'+json.new+'</p></div></div><div class="down_book_info"><a href="'+json.down+'" title="'+json.title+'" class="down_url" target="_blank">点击下载</a></div></div>'; $(".explain").html(mkhtml); $("#load").empty(); } else { alert(data.msg); $("#load").empty(); } } }); }); var currentPage = "1";//当前页 //搜索 $('button[type=submit]').click(function (){ book_list(currentPage); }); //下一页 $(document).on("click",".book_next", function(){ var datapg =$(this).attr('data-next'); var datasize =$(this).attr('data-size'); book_list(datapg); }); //获取数据 function book_list(pega){ var text = $('#txt').val(); $.ajax({ url: Apiurl, type: 'post', dataType: 'json', data: {action:'so',do:text,pg:pega}, beforeSend: function(xhr){$("#load").html('<div class="preloader"><div class="loader"></div></div>');}, success: function(data) { if (data.code == 200) { var json = data.data; var list = ''; var count = data.count; //记录条数 var pageSize = 15; //每页示数目 var size = Math.ceil(count/pageSize); //计算总页数 for (i = 0; i < json.length; i++) { list += '<div class="book_list"><div class="book_title"><a href="javascript:;" data-id="'+json[i].id+'" id="book_down"><span>'+json[i].type+'</span>'+json[i].title+'</a></div><div class="book_meta"><span>作者:'+json[i].author+'</span><span>时间:'+json[i].time+'</span></div></div>'; } if(count > pageSize){ currentPage++ ; if (currentPage == size || currentPage > size){ var next = '<div id="book_next">已经到头了</div>'; }else{ var next = '<div id="book_next" class="book_next" data-next="'+currentPage+'" data-size="'+size+'">下一页</div>'; } }else{ var next = ''; } var mkhtml = '<h1 class="book_so"><span>正在搜索<em>'+text+'</em></span><span>'+count+'条数据</span></h1><div class="explain_content">'+list+''+next+'</div>'; $(".explain").html(mkhtml); $("#load").empty(); } else { alert(data.msg); $("#load").empty(); } } }); } </script> </body> </html>