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
历届学生/陈一航/2020-04-02/search.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照百度搜索提示建议</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 400px;
margin: 30px auto;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="main">
<input class="search_key" type="text" placeholder="输入关键字">
<ul class="search_list none">
</ul>
</div>
</body>
<script>
// 获取输入框input的html
var searchKey = document.querySelector(".search_key");
// 获取建议列表的父容器
var searchList = document.querySelector(".search_list");
// 搜索建议数组
// 今天天气不错
// <span>天气</span>
var KeyWord = ['今天天气不错','心情不错', '今天不上课','我要学习HTML', '学习JS不错', '天气是阴天'];
// 存放符合用户条件的数据
var NewKeyWord = [];
// 给input绑定输入事件
searchKey.oninput = function (e) {
// 判断用户输入输入内容，或者是否在删除内容
if (searchKey.value.length == 0 || e.data == null) {
// 清空上次搜索的数组
NewKeyWord = []
// 清空上次遗留的html
document.querySelector(".search_list").innerHTML = ""
// 把建议列表隐藏
searchList.className = "search_list none"
// 判断用户是否在删除，如果是 先清除上次的数组和html，之后重新匹配运行
e.data == null ? PiPei() : ''
// 输入不为空，开始匹配
} else {
PiPei()
}
}
function PiPei() {
// 遍历搜索建议数组
KeyWord.forEach(function(val,index) {
// 只有在输入的长度不为0的情况下，并且能够在 搜索建议数组 能匹配到数值的情况下才保存数据到新数组
if (searchKey.value.length != 0 && val.indexOf(searchKey.value) > -1) {
// 截取符合用户输入的关键词出来，然后拼接成html带上颜色
var jqukey = `<span style="color: red">${val.substring(val.indexOf(searchKey.value), val.indexOf(searchKey.value) + searchKey.value.length)}</span>`
// 将拼接好带颜色的字符串 替换到 原本的字符串中，并覆盖原本字符串
val = val.replace(searchKey.value, jqukey)
// 保存到新数组
NewKeyWord.push(val)
}
});
// 遍历渲染到页面
NewKeyWord.forEach(function(val,index){
// 插入li标签到ul里面
document.querySelector(".search_list").innerHTML += `<li>${val}</li>`
});
// 显示 建议列表
searchList.className = "search_list"
}
</script>
</html>

119
历届学生/陈一航/2020-04-02/tabs.html Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.active_title {
color: red;
}
.active_content {
display: block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</div>
</body>
<script>
// 假装这是后端给我们的json数据
var Tabs = {
status: 200,
result: {
tabs_title: [
{ id: 1, title: '公告' },
{ id: 1, title: '规则' },
{ id: 1, title: '论坛' },
{ id: 1, title: '论坛2' }
],
tabs_content: [
{ id: 1, title: '公告的内容' },
{ id: 1, title: '规则的内容' },
{ id: 1, title: '论坛的内容' },
{ id: 1, title: '论坛的内容2' }
]
}
};
// 获取两个父容器ul，为 innerHTML 做准备
var TabsTitle = document.querySelector(".tabs_title");
var TabsContent = document.querySelector(".tabs_content");
// 根据数据渲染标题的li标签
function RenderTitle() {
Tabs.result.tabs_title.forEach( function(val,index) {
TabsTitle.innerHTML += `<li class="${ index == 0 ? 'active_title' : '' }">${val.title}</li>`
} )
}
// 根据数据渲染内容的li标签
function RenderContent() {
Tabs.result.tabs_content.forEach( function(val,index) {
TabsContent.innerHTML += `<li class="${ index == 0 ? 'active_content' : '' }">${val.title}</li>`
} )
}
// 绑定点击事件，注意：一定要在 渲染标题和内容之后运行
function BindClick() {
// 获取标题的所有li标签
var TabsTitleLi = document.querySelectorAll(".tabs_title li");
// 获取内容的所有li标签
var TabsContentLi = document.querySelectorAll(".tabs_content li");
TabsTitleLi.forEach( function(val,index) {
val.onmouseover = function () {
TabsTitleLi.forEach(function(v, i){
v.className = ""
TabsContentLi[i].className = ""
})
val.className = "active_title"
TabsContentLi[index].className = "active_content"
}
} )
}
RenderTitle()
RenderContent()
BindClick()
</script>
</html>