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

54
历届学生/吴欣阳/每天课程/2021-06-11/event.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>event 事件</title>
</head>
<body>
<div class="test">
<p>你好1</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
<p>你好2</p>
</div>
<button>点我</button>
</body>
<script>
// 事件：用户在浏览器基本上干的所有事情都是js的事件
// 事件三要素组成：事件源 事件类型 事件处理函数
// 第一种绑定事件的方式
// document.querySelector("button").onclick = function (e) {
// console.log(document.querySelector(".test").children);
// }
// 网页的标签会在js中被转化为对象进行存储
// 这个对象叫什么？虚拟dom
// 虚拟dom转换成真实的dom
// var p = document.querySelectorAll(".test p");
// console.log(p)
// p.forEach(function (v) {
// v.onclick = function () {
// console.log(v)
// }
// })
</script>
</html>

93
历届学生/吴欣阳/每天课程/2021-06-11/function.html Normal file
View File

@@ -0,0 +1,93 @@
<!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>
</body>
<script>
// 方法 函数 function
// 作用？：实现重复代码的封装
// 无参数的方法
// 1 先定义
// function dddd () {
// console.log("ddddd");
// }
// // 2 使用
// dddd()
// // 匿名方法
// var a = function () {
// console.log("a方法");
// }
// a()
// 方法参数的传递
// function zhuangxiu () {
// console.log();
// console.log(arguments[0],arguments[1], ": 拿到钱帮你装修");
// return "我装修好了，你可以入住了"
// }
// var my = zhuangxiu(50000,10000)
// console.log(my);
// 局部作用域
// 全局作用域
// function GetA() {
// var a = 2;
// console.log(a); // 2
// }
// GetA()
// console.log(a); // 1
// var a = function () {
// console.log("a");
// }
// var b = a;
// b()
// 回调
// 回调的作用，解决异步返回值问题
// 同步 & 异步
// var a = function (status) {
// var test = "哈哈哈哈"
// status(test)
// }
// a( function(res) {
// console.log(res);
// } )
// function a ( callback ) {
// var test;
// setTimeout(function() {
// test = "测试";
// callback(test)
// // console.log(test);
// },3000)
// // return test;
// }
// a( function(r) {
// console.log(r);
// } );
</script>
</html>

69
历届学生/吴欣阳/每天课程/2021-06-11/tabs.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.content_active {
display: block !important;
}
.title_active {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="title_active">公告</li>
<li>规则</li>
<li>安全</li>
<li>公益</li>
</ul>
<ul class="tabs_content">
<li class="content_active">公告的内容</li>
<li>规则的内容</li>
<li>安全的内容</li>
<li>公益的内容</li>
</ul>
</body>
<script>
// 第一步：为标题的所有li标签绑定点击事件
// 第二步：为点击的li加上激活类名，并删除其他li上的类名
// 获取 tabs_title 里面的所有li标签
var TitleLi = document.querySelectorAll(".tabs_title li")
var ContentLi = document.querySelectorAll(".tabs_content li")
// 遍历所有li标签
TitleLi.forEach(function (v,i) {
// 为每个li标签绑定点击事件
v.onclick = function () {
// 清除所有li标签上的类名
TitleLi.forEach(function (item,index) {
item.className = ""
ContentLi[index].className = ""
})
// 给你点击的那个li加类名
v.className = "title_active"
ContentLi[i].className = "content_active"
}
})
</script>
</html>

142
历届学生/吴欣阳/每天课程/2021-06-11/tabs_v2.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabs_v2</title>
<style>
body,ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.content_active {
display: block !important;
}
.title_active {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var data = [
{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];
var currentIndex = 0;
function RenderTitle() {
// var html = ""
// data.forEach(function (v,i) {
// console.log(v)
// html += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
// })
// console.log(html)
//
// document.querySelector(".tabs_title").innerHTML = html
data.forEach(function (v,i) {
document.querySelector(".tabs_title").innerHTML
+= `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`;
document.querySelector(".tabs_content").innerHTML
+= `<li class="${i == 0 ? 'content_active' : '' }"></li>`;
})
// 获取所有标题的li标签
var TitleLi = document.querySelectorAll(".tabs_title li");
var ContentLi = document.querySelectorAll(".tabs_content li");
// 为标题li绑定点击事件
TitleLi.forEach(function (v,i) {
v.onclick = function () {
TitleLi.forEach(function (item,index) {
item.className = ""
ContentLi[index].className = ""
})
v.className = "title_active"
ContentLi[i].className = "content_active"
currentIndex = i
RenderContent()
}
})
}
function RenderContent() {
var li = document.querySelectorAll(".tabs_content li");
li[currentIndex].innerHTML = ""
data[currentIndex].content.forEach(function (v) {
li[currentIndex].innerHTML += `<p>${v.text}</p>`
})
}
RenderTitle()
RenderContent()
</script>
</html>