【原创】抖音热门视频数据源码

小尘 · 发表于 2022-5-20 16:39:08

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

源码
<!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">

         ?2020 抖音热门 <a  target="_blank" rel="nofollow">粤G备100号</a>

</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.six+'</span>℃</div><div class="title">'+json.one+'</div><span class="author">'+json.seven+'</span><p class="lineDot"><a href="'+json.four+'" target="_blank" rel="nofollow" title="背景音乐">背景音乐</a><a href="'+json.two+'" target="_blank" rel="nofollow" title="封面图片">封面图片</a><a href="'+json.three+'" target="_blank" rel="nofollow" title="播放地址">播放地址</a></p></article>';

                                 }

                                 oDiv.innerHTML = '<aside><span>热门排行</span></aside>'+Divhtml+'';

                                 time.innerHTML = '更新于:'+data.time+'';

                     }

         });

});

</script>

</body>

</html>
复制代码

相关帖子