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

85
历届学生/front-end-team/每天课程/2022-04-03/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 复习</title>
</head>
<body>
<input type="text" placeholder="关键字">
<button>搜索</button>
<div class="result"></div>
</body>
<script>
// 数组&对象 循环 事件&方法（代码封装） ajax请求 dom操作
//
// 数组 for forEach while map filter
var a = [1, 2, 3, 4, 5, 6]
console.log(a[0]);
a.forEach((v) => {
console.log(v);
})
// for in 对象 key（键 名字） - value（值） 来存值
var obj = {
name: '刘兵',
age: 18
}
for (const key in obj) {
console.log(obj[key]);
}
// 作业 遍历打印出下面数组中的所有数值
// typeof 变量名 作用：求变量类型
var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]];
test.forEach(v => {
// 如果外层循环遇到了 数字，才打印
if (typeof v == "number") {
console.log(v);
// 如果外层循环的时候遇到了 数组，那么就进行二次遍历
} else {
v.forEach(j => {
console.log(j);
});
}
})
// 使用 querySelector 获取一个按钮并存放到变量button中
// 获取多个 querySelectorAll
// innerText 插入文字
// innerHTML 插入html
var button = $("button");
var input = $("input");
var result = $(".result");
button.onclick = () => {
console.log(input.value)
result.innerText = input.value
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

86
历届学生/front-end-team/每天课程/2022-04-03/tab.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".tabs_title li");
var contentLi = _(".tabs_content li");
console.log(titleLi);
// 为标题的li标签批量绑定点击事件
titleLi.forEach((v,i) => {
v.onclick = () => {
// 当你点击li的时候，先删除所有li标签上的类名
titleLi.forEach((j,index) => {
j.classList.remove("active_title")
// 利用 标题遍历时候产生的下标，来关联 内容 数组+下标
contentLi[index].classList.remove("active_content")
});
// 然后再为你点击的那个li标签加激活样式的类名
v.classList.add("active_title");
//
contentLi[i].classList.add("active_content");
}
})
// 封装的方法，用来获取所有li标签的数组
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

145
历届学生/front-end-team/每天课程/2022-04-03/tabsV2.html Normal file
View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title"></ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var index = 0;
var tabsData = [
{
id: 1,
title: '首页',
page: 1,
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
]
},
{
id: 2,
title: '社会',
page: 1,
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' }
]
},
{
id: 3,
title: '财经',
page: 1,
content: [
{ text: '财经的内容1' },
{ text: '财经的内容2' },
{ text: '财经的内容3' },
{ text: '财经的内容4' },
]
},
];
// 渲染 tabs标题的li标签
function renderTitle() {
tabsData.forEach((v, i) => {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `<li class="${i == 0 ? 'active_content' : ''}"></li>`;
})
_(".tabs_title li").forEach((v,i) => {
v.onclick = () => {
// 保存你点击的li标签的下标，方便下面 renderContent 使用
index = i;
// 当你点击li的时候，先删除所有li标签上的类名
_(".tabs_title li").forEach((j, idx) => {
j.classList.remove("active_title")
_(".tabs_content li")[idx].classList.remove("active_content");
});
// 然后再为你点击的那个li标签加激活样式的类名
v.classList.add("active_title");
_(".tabs_content li")[i].classList.add("ative_content");
renderContent();
}
})
}
// 渲染和标题对应的内容（content）
function renderContent() {
// 访问到你点击的标题所对应的内容的li
_(".tabs_content li")[index].innerHTML = ""
tabsData[index].content.forEach(v => {
_(".tabs_content li")[index].innerHTML += `<p>${v.text}</p>`
})
}
renderTitle();
renderContent();
// 封装的方法，用来获取所有li标签的数组
function _(className) {
return document.querySelectorAll(className)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>