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

78
历届学生/韩一伟/项目开发/上课项目/tabs切换/index.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, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs {
width: 300px;
margin: 0 auto;
}
.title {
display: flex;
height: 45px;
align-items: center;
justify-content: space-between;
}
.conetnt li {
display: none;
}
.t_active {
color: red;
}
.c_active {
display: block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
<li class="a t_active">社会</li>
<li>财经</li>
<li>军事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<ul class="conetnt">
<li class="c_active">社会的内容</li>
<li>财经的内容</li>
<li>军事的内容</li>
<li>体育的内容</li>
<li>娱乐的内容</li>
</ul>
</div>
</body>
<script>
var title = document.querySelectorAll(".title li");
var content = document.querySelectorAll(".conetnt li");
// es6 forEach
title.forEach( function(v,i) {
v.onclick = function () {
title.forEach(function (item,index) {
item.className = ""
content[index].className = ""
})
v.classList.add("t_active")
content[i].classList.add("c_active")
}
} )
</script>
</html>

73
历届学生/韩一伟/项目开发/上课项目/tabs切换/jianyi.html Normal file
View File

@@ -0,0 +1,73 @@
<!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>搜索建议</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul>
</ul>
</body>
<script>
var search = document.querySelector("input");
// 搜索建议数组
var list = ['今天下雨了', '今天忘记吃药', '今天下雨很大', 'html很简单', 'js+html实现功能', '忘记带手机了'];
// 保存符合条件的建议
var newList = [];
// 为输入框绑定输入事件
search.oninput = function () {
// 清除上一次留下的记录
newList = []
// 用户输入的关键字不等0，表示有值才开始走里面的搜索建议代码
if (search.value.length != 0) {
// 遍历取出list中每条数据
list.forEach(function (v) {
// 判断用户输入的是否在建议数组中有
if (v.includes(search.value)) {
// 替换关键字为带标签样式的数据
// 再保存到新数组newList中
newList.push(
v.replace(search.value, `<span style="color:red">${search.value}</span>`)
)
}
})
renderLi()
// 没有输入东西，给用户一个提示
} else {
document.querySelector("ul").innerHTML = "请输入关键字"
}
}
// 专门用来生成多个li标签，并放到网页ul中
function renderLi() {
// 如果没搜到，现实暂无
if (newList.length == 0) {
document.querySelector("ul").innerHTML = "<p>暂无建议</p>"
// 搜到了
} else {
// 保存所有li标签代码的
var li = ""
// 遍历newList搜索建议数组
newList.forEach(function (v) {
// 进行拼接多个li标签
li += `<li>${v}</li>`
});
// 使用 innerHTML 将所有li标签的html代码塞入 ul
document.querySelector("ul").innerHTML = li
}
}
</script>
</html>

53
历届学生/韩一伟/项目开发/上课项目/tabs切换/message.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>留言</title>
<style>
body {
margin: 0;
padding: 0;
}
textarea {
resize: none;
width: 100%;
height: 100%;
}
.main {
position: relative;
margin: 10% auto;
width: 300px;
height: 200px;
}
.main span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span class="text">0/30</span>
</div>
</body>
<script>
var input = document.querySelector("textarea")
var text = document.querySelector(".text")
input.oninput = function () {
if (input.value.length > 30) {
input.value = input.value.substring(0,30)
} else {
text.innerText = `${input.value.length}/30`
}
}
</script>
</html>