nice哦
基于AJAX+HTML+CSS写的一个单页小说下载器，API采用幽梦数据的（也就是我自己的）。
复制以下内容到.html文件中保存上传即可使用，资料请自行更改。
示例源码
<!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>