bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
历届学生/韩想/项目开发/练习项目/仿快手/ceshi.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul>
</ul>
</body>
<script src="./js/ajax.js"></script>
<script src="./js/utils.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./js/index.js"></script>
<script>
var ul = document.querySelector("ul");
var page = '';
function getData() {
http({
url: 'http://127.0.0.1:3000/api/list',
method: 'GET',
data: {
page: page
},
success: function (res) {
page = res.data.pcursor
AppendUl(res.data)
}
})
}
function AppendUl(res) {
console.log(page)
res.list.forEach((val,index)=>{
ul.innerHTML+= `
<li>
<div class="toubu">
<div class="mohu" style="background: url(${val.thumbnailUrl});"></div>
<img src="${val.thumbnailUrl}" alt="">
</div>
<div class="bottom">
<div class="toux">
<a href="">
<img src="${val.user.avatar}" alt="">
<span>${val.user.name}</span>
</a>
</div>
<div class="dzsc">
<a class="down" href="">下载</a>
<a class="play" href="./play.html?uid=${val.user.id}&vid=${val.id}">播放</a>
</div>
</div>
</li>
`
})
}
getData()
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
　　　　　var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
});
</script>
</html>
<!-- <script language="javascript">
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
　　　　　var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
});
</script> -->

16
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/css/clear.css Normal file
View File

@@ -0,0 +1,16 @@
/* 专门用来重置浏览器默认样式的 */
body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

87
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/css/index.css Normal file
View File

@@ -0,0 +1,87 @@
body {
background: #666;
}
ul{
display: flex;
flex-flow: wrap;
width: 100%;
}
ul li {
background: #fff;
width: 230px;
margin-right: 20px;
margin-bottom: 20px;
}
.toubu {
width: 230px;
height: 178px;
text-align: center;
position: relative;
overflow: hidden;
}
.mohu {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background: #000;
filter: blur(10px);
background: url("https://tx2.a.yximgs.com/upic/2019/07/03/10/BMjAxOTA3MDMxMDA0MTVfNTM5MDQyMTEyXzE0NzI1NzExODYxXzFfMw==_B31e7e8be6ec877b201f37b511609f7e7.jpg?di=d3a20ac3&bp=10004");
background-position: center center;
}
.toubu img {
width: 103px;
height: 178px;
position: absolute;
z-index: 3;
left: 50%;
margin-left: -51.5px;
}
.bottom {
padding: 10px 5px 5px 5px;
box-sizing: border-box;
}
.toux a {
display: flex;
justify-content: flex-start;
align-items: center;
color: #bababa;
}
.toux a img {
width: 35px;
height: 35px;
border-radius: 100%;
}
.toux a span {
width: 50%;
text-overflow : ellipsis;
font-size: 13px;
width: 230px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 10px;
}
.dzsc {
display: flex;
justify-content: space-between;
height: 36px;
align-items: center;
padding: 3px 5px 0 5px;
color: #b7b7b7;
font-size: 13px;
}
.dzsc a {
color: #b7b7b7;
}

30
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/css/play.css Normal file
View File

@@ -0,0 +1,30 @@
body{
background: rgba(0,0,0,0.87843137);
}
.shiping{
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
.shiping video{
width: 400px;
height: 100%;
object-fit: contain;
outline: none;
margin-top: 40px;
}
.fanhui{
position: absolute;
width: 50px;
height: 50px;
background: #666;
border-radius: 100%;
text-align: center;
font-size: 30px;
top: 50px;
right: 400px;
}
.fanhui a{
color: black;
}

22
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/css/public.css Normal file
View File

@@ -0,0 +1,22 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.w-1200 {
width: 1200px;
margin: 0 auto;
}
.center {
text-align: center;
}

84
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/index.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
var ul = document.querySelector("ul");
var page = '';
function getData() {
http({
url: 'http://127.0.0.1:3000/api/list',
method: 'GET',
data: {
page: page
},
success: function (res) {
page = res.data.pcursor
AppendUl(res.data)
}
})
}
function AppendUl(res) {
console.log(page)
res.list.forEach((val,index)=>{
ul.innerHTML+= `
<li>
<div class="toubu">
<div class="mohu" style="background: url(${val.thumbnailUrl});"></div>
<img src="${val.thumbnailUrl}" alt="">
</div>
<div class="bottom">
<div class="toux">
<a href="">
<img src="${val.user.avatar}" alt="">
<span>${val.user.name}</span>
</a>
</div>
<div class="dzsc">
<a class="down" href="">下载</a>
<a onclick="myFunction()" class="play" href="./play.html?uid=${val.user.id}&vid=${val.id}">播放</a>
</div>
</div>
</li>
`
})
}
getData()
// $(".play").onclick(function () {
// $("video").get(0).play()
// });
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
getData()
console.log("到底了,发起请求")
}
});
</script>
</html>

37
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/js/ajax.js Normal file
View File

@@ -0,0 +1,37 @@
/**
*
* @param option
* {
* url: '',
* method: '',
* data: {
* id: 1,
* page: 10
* },
* async: true,
* success: function() {},
* error: function() {},
* }
*/
function http(option) {
var params = [];
if (option.method == "GET") {
for (const key in option.data) {
params.push(`${key}=${option.data[key]}`)
}
option.url = `${option.url}?${params.join("&")}`
}
var http = new XMLHttpRequest();
http.open(option.method,option.url);
http.send()
http.onreadystatechange = function () {
if(http.readyState == 4) {
if (http.status == 200) {
option.success(JSON.parse(http.responseText))
} else {
option.error(http)
}
}
}
}

0
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/js/index.js Normal file
View File

0
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/js/play.js Normal file
View File

6
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/js/utils.js Normal file
View File

@@ -0,0 +1,6 @@
function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}

45
历届学生/韩想/项目开发/练习项目/仿快手/赵俊凯/play.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/play.css">
</head>
<body>
<div class="shiping">
<div class="fanhui">
<a href="./index.html">x</a>
</div>
<video id="video_player" controls src=""></video>
</div>
</body>
<script src="./js/ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/play.js"></script>
<script>
var video = document.querySelector("video")
http({
url: 'http://127.0.0.1:3000/api/play',
method: 'GET',
data: {
principalId: GetQueryString("uid"),
photoId: GetQueryString("vid")
},
success: function (res) {
console.log(res)
video.src = res.playUrl
video.poster = res.poster
}
})
function zd(){
document.getElementById("video_player").setAttribute('autoplay', true);
}
window.onload=function(){
zd();
}
</script>
</html>