|
前端的UI是工作闲的时候写的,或许不太美观。但是想要修改还是很容易的,源码上传到空间或服务器即可使用-.-。
这里说下,关于那个情头的源码,这边就不更新了,微博那边的规则改了。
-------------------------------
像这种抖音热搜的源码网上或许会有,应该都是-.-带有水印的把。
然后随便搞了一下,直接解析无水印的-.-
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>幽梦热搜 - 每日实时更新热门抖音视频</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="每日实时更新热门抖音视频">
<meta name="keywords" content="幽梦数据API,每日实时更新热门抖音视频">
<meta name="author" content="幽梦热搜">
<meta name="founder" content="幽梦热搜">
<link rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
body,html{height:100%;width: 100%;}
body{background-color:#F1F2F6;color:#333;font-size:14px;letter-spacing: 1.5px;}
*{margin:0;padding:0;box-sizing: border-box;}
*,::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: #333;text-decoration: none;}
img{max-width: 100%; vertical-align: middle;}
/*头部*/
header{z-index:2;display:flex;padding:0 15px;background-color:#fff;box-shadow:0 0 1em rgba(0,0,0,.1);}
.head-logo{position:relative;width:40px;height:50px;color:#fff;line-height:50px;}
.head-logo img{position:absolute;top:5px;left:0;width:40px;height:40px;}
.head-social{display:flex;height:50px;line-height:50px;flex:1 1 auto;justify-content:flex-end;}
.head-social a{font-size:16px;}
.head-social a+a{padding-left:15px;}
/*header*/
.header-nav{width:100%;background-color:#3464e0;box-shadow:0 0 1em rgba(0,0,0,.1);color:#fff;}
.header-nav .header-info{padding:15px;text-align:center;}
.header-info h1{margin-bottom:10px;text-shadow:-5px 5px 0 rgba(0,0,0,.1);font-weight:600;font-size:30px;line-height:1.5;}
.header-info p{font-size:16px;}
.header-info p+p{margin-top:5px;}
/**/
.container{margin:20px auto;width:100%;max-width:100%;}
.list{overflow:hidden;margin:auto 15px;border:1px solid transparent;border-radius:2px;background:#fff;}
.container .list+.list{margin-top:15px;}
.list h1{padding:5px 10px;border-bottom:1px solid #ddd;color:#555;letter-spacing:1.5px;font-size:16px;line-height:1.5;}
.list .des{padding:10px;color:#555;font-size:14px;}
.list .des span+span{padding-left:15px;color:#ff5722;}
.list .down{display:flex;overflow:hidden;width:100%;}
.list .down span{padding:10px;padding-top:0;width:90px;text-align:center;}
.list .down a{display:inline-block;width:100%;height:30px;border:1px solid #333;border-radius:4px;color:#555;line-height:30px;}
.list .down span+span a{border:1px solid #4caf50;background-color:#4caf50;color:#fff;}
.list .down span+span+span a{border:1px solid #9e9e9e;background-color:#9e9e9e;color:#fff;}
/*footer*/
.footer{overflow:hidden;margin-top:30px;background-color:#fff;}
.footer .content{margin:0 auto;padding:10px 15px;width:1200px;max-width:100%;color:#666;text-align:center;}
.footer .content a{color:#666;}
.footer .content a+a{margin-left:10px;}
.footer .content p+p{margin-top:10px;}
</style>
</head>
<body>
<header>
<div class="head-logo">
<a href="#" title="logo"><img src="https://umapi.top/public/logo.png" alt=""></a>
</div>
<div class="head-social">
<a href="#" target="_blank" title="QQ交流群" rel="nofollow"><i class="fa fa-qq"></i></a>
<a href="#" target="_blank" title="博客" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
</header>
<div class="header-nav">
<div class="header-info">
<h1>幽梦热搜</h1>
<p>每日实时更新热门抖音视频</p>
</div>
</div>
<div class="container"></div>
<div class="footer">
<div class="content">
<p><a target="_blank" rel="nofollow" title="粤ICP备19119905号-2">粤ICP备19119905号-2</a><a target="_blank" rel="nofollow" title="站长统计">站长统计</a></p>
<p>反馈或建议请发送邮件至:1410469560@qq.com</p>
</div>
</div>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://umapi.top/api/douyin.php",
data: {},
dataType: "json",
success: function(data){
var html = '';
var json = data.data;
var wrk = 'http://umapi.top/max/api.php?url=';
if(data.code == 200){
for (i = 0; i < json.length; i++) {
if(json.music == ''){
var music = 'javascript:;';
var blank = '';
}else{
var music = json.music;
var blank = 'target="_blank"';
}
html += '<div class="list"><h1>'+json.title+'</h1> <div class="des"><span><i class="fa fa-user"></i>'+json.name+'</span><span><i class="fa fa-fire"></i>'+json.hot+'万</span></div><div class="down"><span><a href="'+wrk+''+json.url+'" target="_blank" title="播放" rel="nofollow">播放</a></span> <span><a href="'+music+'" '+blank+' title="'+json.info+'" rel="nofollow">音乐</a></span> <span><a href="'+json.img+'" target="_blank" title="封面" rel="nofollow">封面</a></span></div></div>';
}
}else{
html += '<div class="list"><h1>接口失效</h1></div>';
}
$('.container').html(html);
}
});
});
</script>
</body>
</html>
复制代码
其实无水印的接口并没有-.-凉只不过是得重新刷新一下
|
|