抖音热门视频数据单页面html源码

重现江湖 · 发表于 2020-1-5 19:02:22

偶尔上来发点干货..
这次分享的视频抖Yin的热门视频排行，虽说没什么卵用。
但是总会有人需要的，实时对接，无需人工维护。
UI随便扒的，可随便换。

源码自己新建一个文本改格式.html即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抖音热门视频榜单</title>
<meta name="keywords" content="抖音热门视频榜单" />
<meta name="description" content="提供实时抖音热门短视频榜单排行" />
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
html{width:100%;height:100%;background:#fff;background-color:#f5f5f5;color:#333;font-size:50px;font-family:Microsoft YaHei,Helvetica Neue,HelveticaNeue,Helvetica-Neue,Helvetica,BBAlpha Sans,sans-serif;user-select:none;}
*{box-sizing:border-box;outline:0!important;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;touch-callout:none;}
body,div,li,p,pre,ul{margin:0;padding:0;text-align:left;}
body{width:100%;height:100%;min-width:3.2rem;font-size:.24em;}
li{list-style:none;}
a{text-decoration:none;}
body.body{padding-top:.96rem;}
.navBar{position:fixed;top:0;right:0;left:0;z-index:1000;display:-ms-flexbox;display:flex;height:.96rem;background:#dc3c38;color:#fff;}
.nav{position:absolute;top:0;left:50%;overflow:hidden;margin-top:.16rem;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:.36rem;line-height:.52rem;transform:translateX(-50%);-ms-flex:1;flex:1;}
.nav a{color: #fff;font-size: 20px;}
#foot{height:.8rem;background:#000;color:#666;text-align:center;font-size:.2rem;line-height:.8rem;}
#foot a{color:#666;}
#time{font-size: 16px;border-top: 1px solid #e5e5e5;padding: 5px 10px;background-color: #fff;margin-top: 15px;}
#list{border-bottom:1px solid #e5e5e5;background-color:#fff;margin-bottom: 15px;}
#list section{padding-top:.5rem;}
#list section aside{position:relative;top:-.2rem;color:#dd403b;font-size:.26rem;}
#list section aside span{position:absolute;top:-.2rem;left:.24rem;z-index:20;padding:0 .15rem;border:1px solid #dd403b;border-radius:.3rem;background:#fff;line-height:.38rem;}
#list section aside span:before{left:-.24rem;}
#list section aside span:after,#list section aside span:before{position:absolute;width:.22rem;height:100%;background:#fff;content:'';}
#list section aside span:after{right:-.24rem;}
#list .article:after,#list section aside:after{position:absolute;bottom:0;left:0;z-index:10;width:100%;height:1px;background-color:#e5e5e5;content:' ';transform:scale(1,.5);transform-origin:bottom;}
#list .article{position: relative;padding: 10px 15px;color: #8e8e94;font-size: .28rem;line-height: 1.5;overflow: hidden;}
#list .article .em span{font-size:12px;margin-right: 3px;}
#list .article .em{float: right;color: #ff9400;font-size: .22rem;}
#list .article .title{color:#333;font-size:.32rem;}
#list .article .lineDot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;margin-top: 10px;}
#list .article .lineDot a{display:inline-block;margin-right:10px;padding:5px 10px;border:1px solid transparent;border-radius:2px;background:#4caf50;box-shadow:rgba(0,0,0,.1) 0 0 2px 0;color:#fff;font-size:12px;}
#list .article .lineDot a:nth-child(2){background: #00bcd4;}
#list .article .lineDot a:nth-child(3){margin-right: 0px; background: #FF5722;}
</style>
</head>
<body class="body">
<header class="navBar">
<h1 class="nav"><a href="../" title="logo">抖音热门榜单</a></h1>
</header>
<div id="time"></div>
<div id="list">
<section id="hot"></section>
</div>
<div id="foot">
</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "https://umapi.top/api/hotdy.php",
type: "GET",
dataType: "json",
data:"",
async: false,
success:function(data){
var oDiv = document.getElementById('hot');
var time = document.getElementById('time');
var Divhtml = "";
var json = data.messages;
for(i=0;i< json.length;i++) {
Divhtml = Divhtml + '<article class="article"><div class="em"><span>'+json[i].six+'</span>℃</div><div class="title">'+json[i].one+'</div><span class="author">'+json[i].seven+'</span><p class="lineDot"><a href="'+json[i].four+'" target="_blank" rel="nofollow" title="背景音乐">背景音乐</a><a href="'+json[i].two+'" target="_blank" rel="nofollow" title="封面图片">封面图片</a><a href="'+json[i].three+'" target="_blank" rel="nofollow" title="播放地址">播放地址</a></p></article>';
}
oDiv.innerHTML = '<aside><span>热门排行</span></aside>'+Divhtml+'';
time.innerHTML = '更新于:'+data.time+'';
}
});
});
</script>
</body>
</html>

复制代码

[Web] 抖音热门视频数据单页面html源码

相关帖子

浏览过的版块