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

65
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/tab栏切换基础版本.html Normal file
View File

@@ -0,0 +1,65 @@
<!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>Document</title>
<style>
.a{
display: flex;
align-items: center;
justify-content: space-around;
}
.color{
color: red;
}
.b li{
display: none;
}
.show{
display: inline-block !important;
}
</style>
</head>
<body>
<div>
<ul class="a">
<li class="color">推荐</li>
<li>游戏</li>
<li>新闻</li>
</ul>
<ul class="b">
<li class="show">推荐内容</li>
<li>游戏内容</li>
<li>新闻内容</li>
</ul>
</div>
<script>
// 1.先获取值
let x=document.querySelectorAll('.a li');
let y=document.querySelectorAll('.b li');
// 2.遍历x
x.forEach((item,index)=>{
//为x添加点击事件
item.onclick=()=>{
// 再次遍历一遍x，先把所有的classname给清掉
x.forEach((i,j)=>{
// 把x上面的classname清除掉
i.className='';
// 把y上面的默认样式给清除掉
y[j].className='';
});
// 当我们点击谁时，就把颜色给谁
item.className='color';
// 这一步是重点，x我们已经遍历一遍了，可以直接拿到索引值，xd索引值和y的索引值一样，
// 可以做相关联操作，和上面一样，也需要先清除classname的默认值，谁点给谁加classname
y[index].className='show';
}
})
</script>
</body>
</html>

159
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/tab栏切换高级版本.html Normal file
View File

@@ -0,0 +1,159 @@
<!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>Document</title>
<style>
.a {
display: flex;
align-items: center;
justify-content: space-around;
}
.show_color {
color: red;
}
.b li {
display: none;
}
.show {
display: inline-block !important;
}
</style>
</head>
<body>
<div>
<ul class="a">
</ul>
<ul class="b">
</ul>
</div>
<script>
var arr = [
{
title: '推荐',
list: [
{
title: '推荐内容1',
time: '2021-3-6'
}, {
title: '推荐内容2',
time: '2021-3-6'
}, {
title: '推荐内容3',
time: '2021-3-6'
}
]
}, {
title: '游戏',
list: [
{
title: '游戏内容1',
time: '2021-3-6'
}, {
title: '游戏内容2',
time: '2021-3-6'
}, {
title: '游戏内容3',
time: '2021-3-6'
}
]
}, {
title: '电影',
list: [
{
title: '电影内容1',
time: '2021-3-6'
}, {
title: '电影内容2',
time: '2021-3-6'
}, {
title: '电影内容3',
time: '2021-3-6'
}
]
}
];
//渲染标题
// 1.获取值
let x=document.querySelector('.a');
let y=document.querySelector('.b');
// 用函数封装
function top1(){
// 2.遍历后端给的数据
arr.forEach(function(item,index){
// 3.使用模板字符串做拼接,用三目运算符做判断.把默认颜色给第一个.数组需要遍历,数组里面的对象可以通过.的方式调用
x.innerHTML+=`<li class='${index==0? 'show_color':''}'>${item.title}</li>`;
});
}
//渲染内容
// 函数封装
function con(){
// 再次遍历后端给的数组
arr.forEach(function(i,j){
// 使用模板字符串渲染进去内容页,中间内容在嵌套一层
y.innerHTML+=`<li class='${j==0? 'show':''}'>${
(i.list.map(function(a,b){
return `<p>${a.title}</p>`
})).join('')
}</li>`;
});
}
top1();
con();
let xx=document.querySelectorAll('.a li');
let yy=document.querySelectorAll('.b li');
xx.forEach(function(item,index){
item.onclick=function(){
xx.forEach(function(i,j){
i.className='';
yy[j].className='';
})
item.className='show_color';
yy[index].className='show';
}
});
// 思路:步骤一
// 1.获取标题的值
// 2.后端给的是数组,我们遍历一遍,又因为里面是对象,我们可以打点通过.title去获取到标题的值
// 3.使用模板字符串和innerHtml追加给我们获取到的标题的值,这样标题不在是空标签了,我们把值放进去了
// 步骤二
// 1.获取内容的值
// 2.我们再去遍历一遍后端给的数组,在使用模板字符串,里面还要在嵌套一层,还要循环一次:
// 第一次遍历是遍历整个数组,里面是对象,通过.list拿到内容,里面又是数组,我们还要循环遍历一遍,最终通过.title拿到内容
// 3.通过俩次遍历和打点我们拿到内容,此时追加给内容,注意不要追加错了,步骤一是追加给标题,步骤二是追加给内容
// 步骤三
// 1.分别获取标题和内容的值,此时的标题和内容不在是空的ul了,标题里面追加了li,内容里面追加了li,还嵌套了p,此时要用querySelectorAll
// 2.给标题注册点击事件,点那个标题就通过classname把值给谁,但在之前我们要先清除所有的标题里面的classname的值,先清除在通过点击事件给谁赋classname
// 3.这里有个骚操作,内容的索引和标题的索引其实是一一相对应的,querySelectorAll获取的是一个数组,(--内容数组[标题下标]--),
// 当我们通过点击事件点击第一个标题,拿到索引0,这个标题的索引0也对应这内容索引0,刚开始内容全部都是隐藏,拿到索引后,通过classname让其显示,当然刚开始要和上面一样全部清除classname值
</script>
</body>
</html>

77
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/搜索框搜索.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>Document</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
<script>
// 思路:1.获取input和ul的值
// 2.给input创建input事件
// 3.遍历list数组,拿用户输入的值(input.value)和list里面的数组做对比,前提时是大于-1,要做个if选择判断
// 4.把符合判断条件的值使用push方法追加进新数组中保存
// 5.遍历新数组,i的值实际上就是用户输入的值和list数组里面的值匹配正确的值,使用模板字符串渲染进ul里面
// 6.但此时有很多bug,要先置空再渲染进ul里面
// 6.外面整体要加判断,用户输入的值使用trim()方法去除俩端空格,判断是否为0,不为0执行里面的代码,为0责清空
// 7.最复杂的来了,如何把字变红?
// 8.使用substr(起始位置,截取长度),此方法是截取特定长度的字符串
// 这里面的起始位置其实就是indexof()返回的索引值,截取长度就是用户输入的值的长度
// 9.生成新的样式,并使用模板字符串包裹一层span标签返回给新数组,里面使用行内样式变成红色
// 10.把生成新的样式替换进新数组中即可
var list = ['html', '学习html', '天气很好吗', '你很好吗', 'JS学习', '不想学习', 'css测试', '明天要测试了'];
// 获取input的值
let input = document.querySelector('input');
// 获取ul的值
let ul=document.querySelector('ul');
// 为获取到的值注册input事件
input.oninput=()=>{
// 创建一个新数组,放在input事件里面,每次都会初始化,符合我们的要求
let newArr=[];
// 如果用户输入的值去除俩端空格的长度不为0
if(input.value.trim().length!=0){
// 遍历list数组
list.forEach((item,index)=>{
// 判断索引值是否大于0，大于0就放进一个新数组里面，并追加进ul里面
if(item.indexOf(input.value)>-1){
//获取下标
let newIndex=item.indexOf(input.value);
// 获取截取长度
let length=input.value.length;
//生成新的样式
let newStar=`<span style="color: red">${item.substr(newIndex,length)}</span>`;
// 返回给新数组,保存并返回
newArr.push(item.replace(input.value, newStar));
}
});
// 先置空再保留
ul.innerHTML='';
// 遍历新数组
newArr.forEach((i,j)=>{
ul.innerHTML+=`<li>${i}</li>`;
})
}else{
ul.innerHTML='';
}
};
</script>
</body>
</html>

78
历届学生/逯帅帅/项目开发/学生项目/应越波/day5/核心价值观动画.html Normal file
View File

@@ -0,0 +1,78 @@
<!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>Document</title>
<style>
body,html{
height: 100%;
}
</style>
</head>
<body>
<script>
// 思路:1.给body设置高100%,但直接设置无效,给body设置高的同时也要给其父元素html设置高100%
// 2.我们不需要遍历数组,可以初始化一个索引,每次点击让其自加,函数里面有个event,里面详细记录了x和y轴
// 3.使用clearElement创建元素,在使用模板字符串添加内容,这里可以使用innerHtml添加元素,但有些许的不方便,然后使用appchild追加进body
// 4.设置一个定时器改变top值,使其向上动起来
// 5.再设置一个定时器使其消失
// 初始化一个值
let index=0;
// 创建数组
let arr=['富强','民主','文明','自由','平等','公正','法治','爱国','敬业','诚信','友善','和谐'];
// 获取body元素
let body=document.querySelector('body');
// 为其注册点击事件，函数里面有个event，里面详细介绍了许多东西，其中就有鼠标点击的时候的x和y的坐标
body.onclick=(event)=>{
// 点击时，获取x，y坐标
var x=event.x,
y=event.y;
// 三目运算符做判断，初始化的值大于数组个数时为0
index>arr.length-1?index=0:'';
// 创建span标签
var span=document.createElement('span');
// 把数组放进去
span.innerHTML=arr[index];
// 添加样式
span.style=`
position: fixed;
opacity: 1;
top:${y}px;
left:${x}px;
color: hsl(${parseInt(Math.random() * 360)},100%,50%);
transition: all .3s;`;
// 把创建好且添加了样式的span标签追加近body页面中
body.appendChild(span);
// 函数，放在外面，使其执行更快，放在里面不能立即执行
animation(span, y);
// 自加
++index;
};
function animation(span,y) {
// 设置定时器，点击的时候y轴移动并且变透明
setTimeout(function(){
span.style.top=`${y-100}px`;
span.style.opacity=0;
},100);
// 设置定时器，一定时间删除
setTimeout(function(){
body.removeChild(span);
},400);
}
</script>
</body>
</html>