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

6
历届学生/陈一航/项目/今日头条/css/clear.css Normal file
View File

@@ -0,0 +1,6 @@
body,ul,li,h1,h2,h3,h4,h5,h6,p,a{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

47
历届学生/陈一航/项目/今日头条/css/edit.css Normal file
View File

@@ -0,0 +1,47 @@
.header {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #d43d3d;
align-items: center;
}
.header .back {
width: 1.1rem;
height: 1.25rem;
margin-left: 12px;
}
.header span {
color: #fff;
margin: 0 auto;
font-size: 16px;
}
.content {
margin-top: 50px;
padding: 0 15px;
}
.delete {
margin-bottom: 20px;
}
.delete ul,
.add ul{
display: flex;
flex-wrap: wrap;
}
.delete span,
.add span{
font-size: 14px;
color: #8d8d8d;
margin-bottom: 12px;
display: block;
}
.delete ul li,
.add ul li{
padding: 5px 10px;
border: 1px solid #8d8d8d;
margin-right: 9px;
width: 16%;
margin-bottom: 10px;
}

150
历届学生/陈一航/项目/今日头条/css/index.css Normal file
View File

@@ -0,0 +1,150 @@
.header {
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: auto;
}
.header_logo {
width: 100%;
height: 44px;
background: #d43d3d;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
}
.message {
position: relative;
}
.message img {
width: 1.6rem;
height: 1.25rem;
}
.message span {
width: .5rem;
height: .5rem;
background: #fff;
border-radius: 100%;
position: absolute;
right: 0;
top: .4rem;
}
.logo .log {
width: 4.9rem;
height: 1.2rem;
}
.logo .refresh {
width: 1rem;
}
.search img {
width: 1.2rem;
}
.swiper_menu {
width: 90%;
overflow-x: scroll;
}
.header_menu {
height: 1.85rem;
background: #f4f5f6;
display: flex;
align-items: center;
justify-content: space-between;
}
.header_menu_left {
display: flex;
width: 160%;
justify-content: flex-start;
padding-left: 15px;
box-sizing: border-box;
}
.header_menu_left li {
font-size: .85rem;
color: #505050;
width: 80px;
}
.header_menu_right {
width: 2rem;
height: 1.85rem;
text-align: center;
line-height: 2rem;
background: #f4f5f6;
color: #f85959;
}
.content {
padding: 0 .75rem;
margin-top: 4.1rem;
}
.list_item {
}
.item {
padding: 16px 0;
}
.one {
}
.one h2 {
color: #222;
font-size: .85rem;
margin-bottom: 6px;
}
.one img {
width: 100%;
}
.one .mes{
margin-top: -0.5rem;
}
.one .mes span {
font-size: .5rem;
color: #999;
}
.two {
display: flex;
height: 5.25rem;
}
.two .item_message{
}
.two .item_message h2{
font-size: .85rem;
margin-right: .6rem
}
.two .item_message span{
font-size: .5rem;
margin-top: .3rem;
color: #999;
}
.two img {
width: 5.65rem;
height: 3.675rem;
}
.three {
}
.three h2 {
font-size: .85rem;
margin-right: .6rem;
margin-bottom: .5rem;
}
.three ul {
display: flex;
}
.three ul li {
width: 33%;
margin-right: 3px;
}
.three ul li img{
width: 100%;
height: 3.675rem;
}
.three span {
font-size: .5rem;
margin-top: .3rem;
color: #999;
}
.active {
color: red !important;
}

23
历届学生/陈一航/项目/今日头条/css/public.css Normal file
View File

@@ -0,0 +1,23 @@
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
.v-algin {
line-height: 53px;
height: 44px;
}

37
历届学生/陈一航/项目/今日头条/edit.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择频道 - 今日头条</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/edit.css">
</head>
<body>
<div class="header">
<img onclick="history.back()" class="back" src="./img/header_back.png"/>
<span>频道管理</span>
</div>
<div class="content">
<div class="delete">
<span>点击删除</span>
<ul>
</ul>
</div>
<div class="add">
<span>点击添加</span>
<ul>
</ul>
</div>
</div>
</body>
<script src="./js/config.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/edit.js"></script>
</html>

BIN
历届学生/陈一航/项目/今日头条/img/feed_ic_message_normal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 B

BIN
历届学生/陈一航/项目/今日头条/img/feed_ic_search_normal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/陈一航/项目/今日头条/img/header_back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 998 B

BIN
历届学生/陈一航/项目/今日头条/img/titlebar_refresh_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 B

BIN
历届学生/陈一航/项目/今日头条/img/wap_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

50
历届学生/陈一航/项目/今日头条/index.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日头条</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_logo">
<div class="message v-algin">
<img src="./img/feed_ic_message_normal.png" alt="">
<span></span>
</div>
<div class="logo v-algin">
<img class="log" src="./img/wap_logo.png" alt="">
<img class="refresh" src="./img/titlebar_refresh_small.png" alt="">
</div>
<div class="search v-algin">
<img src="./img/feed_ic_search_normal.png" alt="">
</div>
</div>
<div class="header_menu">
<div class="swiper_menu">
<ul class="header_menu_left">
</ul>
</div>
<a href="./edit.html" class="header_menu_right">+</a>
</div>
</div>
<div class="content">
<ul class="list_item">
</ul>
</div>
</body>
<script src="./js/config.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/index.js"></script>
</html>

36
历届学生/陈一航/项目/今日头条/js/ajax.js Normal file
View File

@@ -0,0 +1,36 @@
/**
*
* @param {*} params
* {
* method: '' // 请求方法
* url: '' //请求网址
* success: function(){}
* }
*/
function http(params) {
var http = new XMLHttpRequest();
var par = ""
if (params.hasOwnProperty("data")) {
for (const key in params.data) {
par+=`&${key}=${params.data[key]}`
}
params.url = params.url + par.replace("&", "?")
}
http.open(params.method, params.url);
http.send();
http.onreadystatechange = function () {
if (http.readyState == 4 ) { // 浏览器自带的
if (http.status == 200) { // 浏览器自带的
var res = JSON.parse(http.responseText);
if (res.error_code == 0) {
params.success(res)
} else {
params.error(res)
}
} else {
alert("网络不好")
}
}
}
}

16
历届学生/陈一航/项目/今日头条/js/config.js Normal file
View File

@@ -0,0 +1,16 @@
var defaultNavList = localStorage.getItem("defaultNavList") == null ? [
{ title: '社会', type: 'shehui' },
{ title: '国内', type: 'guonei' },
{ title: '国际', type: 'guoji' },
{ title: '娱乐', type: 'yule' },
{ title: '体育', type: 'tiyu' }
] : JSON.parse(localStorage.getItem("defaultNavList"))
var settingNavList = localStorage.getItem("settingNavList") == null ? [
{ title: '军事', type: 'junshi' },
{ title: '科技', type: 'keji' },
{ title: '财经', type: 'caijing' },
{ title: '时尚', type: 'shishang' },
{ title: '头条', type: 'top' }
] : JSON.parse(localStorage.getItem("settingNavList"));

72
历届学生/陈一航/项目/今日头条/js/edit.js Normal file
View File

@@ -0,0 +1,72 @@
// 渲染删除元素的li
function RenderDeleteUl() {
document.querySelector(".delete ul").innerHTML = ""
defaultNavList.forEach(function(val,index){
document.querySelector(".delete ul").innerHTML+=`
<li>${val.title}</li>
`
});
BindDeleteUl()
}
// 渲染添加元素的li
function RenderAddUl() {
document.querySelector(".add ul").innerHTML = ""
settingNavList.forEach(function(val,index){
document.querySelector(".add ul").innerHTML+=`
<li>${val.title}</li>
`
});
BindaddUl()
}
function BindDeleteUl() {
var deleteUl = document.querySelectorAll(".delete ul li");
deleteUl.forEach(function(val,index){
val.onclick = function() {
document.querySelector(".delete ul").removeChild(val)
document.querySelector(".add ul").appendChild(val)
// 1 处理数据
// 2 保存数据
// 将数据保存
settingNavList.push(defaultNavList[index])
defaultNavList.splice(index,1)
console.log("defaultNavList: ", defaultNavList)
localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
RenderDeleteUl()
BindaddUl()
}
})
}
function BindaddUl() {
var addUl = document.querySelectorAll(".add ul li");
addUl.forEach(function(val,index){
val.onclick = function() {
document.querySelector(".add ul").removeChild(val)
document.querySelector(".delete ul").appendChild(val)
defaultNavList.push(settingNavList[index])
settingNavList.splice(index,1)
console.log("settingNavList: ", settingNavList)
localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
RenderAddUl()
BindDeleteUl()
}
});
}
RenderDeleteUl()
RenderAddUl()
// BindDeleteUl()
// BindaddUl()

100
历届学生/陈一航/项目/今日头条/js/index.js Normal file
View File

@@ -0,0 +1,100 @@
document.querySelector(".header_menu_left").style.width = defaultNavList.length * 80 + 'px'
function renderNavList() {
defaultNavList.forEach(function(val,index){
$(".header_menu_left").innerHTML+=`<li class="${index ==0?'active': ''}">${val.title}</li>`
});
BindClickLi()
}
function BindClickLi() {
var li = document.querySelectorAll(".header_menu_left li");
li.forEach((val,index)=> {
val.onclick = function () {
li.forEach(vas=>vas.className = "");
val.className = "active";
getData(defaultNavList[index].type)
};
})
}
renderNavList()
function getData(type) {
http({
method: 'GET',
url: 'http://127.0.0.1/mcf/news.php',
data: {
type: type
},
success: function(res) {
RenderPage(res.result.data)
console.log(res.result.data)
},
error: function(err) {
// alert(err)
}
});
}
function RenderPage(data) {
$(".list_item").innerHTML = ""
data.forEach((val,index)=> {
if (val.hasOwnProperty("thumbnail_pic_s03") || val.hasOwnProperty("thumbnail_pic_s02")){
$(".list_item").innerHTML += `
<li class="item three">
<h2>${val.title}</h2>
<ul>
<li>
<img src="${val.thumbnail_pic_s}" alt="">
</li>
<li>
<img src="${val.thumbnail_pic_s02}" alt="">
</li>
<li>
<img src="${val.thumbnail_pic_s03 ? val.thumbnail_pic_s03 : ''}" alt="">
</li>
</ul>
<span>
${val.author_name} ${val.category} ${val.date}
</span>
</li>
`
} else if (Math.random() > 0.5){
$(".list_item").innerHTML += `
<li class="item one">
<a href="${val.url}">
<h2>${val.title}</h2>
<img src="${val.thumbnail_pic_s}" alt="${val.title}">
<div class="mes">
<span>${val.author_name}</span>
<span>${val.date}</span>
<span>${val.category}</span>
</div>
</a>
</li>
`
} else {
$(".list_item").innerHTML += `
<li class="item two">
<div class="item_message">
<h2>${val.title}</h2>
<span>${val.author_name}</span>
<span>${val.date}</span>
<span>${val.category}</span>
</div>
<img src="${val.thumbnail_pic_s}" alt="${val.title}">
</li>
`
}
})
}
getData('top')
function $(className){
return document.querySelector(className)
}

8
历届学生/陈一航/项目/今日头条/news.php Normal file
View File

@@ -0,0 +1,8 @@
<?php
header("Access-Control-Allow-Origin: *");
$type = $_GET["type"];
$url = "http://v.juhe.cn/toutiao/index?type=".$type."&key=ae8dd0002b4d7df3f68d6c7de40d322e";
$data = file_get_contents($url);
echo $data;
?>