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

45
历届学生/zheng-yuqing/项目练习/学生项目/js案例/css/cell.css Normal file
View File

@@ -0,0 +1,45 @@
ul {
overflow: hidden;
}
ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
ul li .left {
width: 100%;
}
ul li .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: 0;
transform: translateX(100%);
}
ul li .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.top {
background: #c8c7cd;
}
.read {
background: #ff9c00;
}
.delete {
background: #ff3a31;
}

19
历届学生/zheng-yuqing/项目练习/学生项目/js案例/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

36
历届学生/zheng-yuqing/项目练习/学生项目/js案例/css/index.css Normal file
View File

@@ -0,0 +1,36 @@
body {
position: relative;
height: 100vh;
}
.menu {
width: 180px;
height: 240px;
background: #fff;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 6px;
box-shadow: 1px 1px 13px #cdcdcd;
position: absolute;
}
.menu li {
display: flex;
align-items: center;
height: 38px;
padding-left: 10px;
cursor: pointer;
}
.menu li:hover {
background: #ece8e8;
border-radius: 4px;
}
.menu li i {
margin-right: 15px;
}
.menu li span {
font-size: 14px;
}
.hidden {
display: none;
}

15
历届学生/zheng-yuqing/项目练习/学生项目/js案例/css/tabs.css Normal file
View File

@@ -0,0 +1,15 @@
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.tabs_title .active {
color: red;
}
.tabs_content li {
display: none;
}
.tabs_content .active {
display: block;
}

135
历届学生/zheng-yuqing/项目练习/学生项目/js案例/侧滑.html Normal file
View File

@@ -0,0 +1,135 @@
<!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>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/cell.css">
</head>
<body>
<div class="main">
<ul>
<li>
<div class="left">
测试1
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="left">
测试2
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="left">
测试3
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var Li = _(".main ul li");
Li.forEach((v, i) => {
v.isOpen = false;
v.ontouchstart = (e) => {
console.log('ontouchstart', e);
var { pageX } = e.touches[0];
v.startX = pageX
Li.forEach((item, index) => {
if (index != i) {
item.style = `
transform: translateX(0px);
`
}
})
}
v.ontouchmove = (e) => {
console.log('ontouchmove', e);
var { pageX } = e.touches[0];
var translateX = Number((pageX - v.startX).toFixed())
if (pageX < v.startX) {
v.style = `
transform: translateX(${translateX >= -180 ? translateX : -180}px);
`
v.isOpen = true
} else if (pageX > v.startX) {
var newX = -180 + translateX
if (v.isOpen) {
v.style = `
transform: translateX(${newX <= 0 ? newX : 0}px);
`
}
}
}
v.ontouchend = (e) => {
console.log('ontouchend', e);
var endX = e.changedTouches[0].pageX;
if (endX < v.startX) {
var ss = v.startX - endX
if (ss < 60) {
v.style = `
transform: translateX(0px);
`
v.isOpen = false
} else {
v.style = `
transform: translateX(-180px);
`
}
} else if (endX > v.startX) {
var ss = endX - v.startX
if (ss < 60) {
v.style = `
transform: translateX(-180px);
`
} else {
v.style = `
transform: translateX(0px);
`
v.isOpen = false
}
console.log("右滑 打开")
}
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

79
历届学生/zheng-yuqing/项目练习/学生项目/js案例/富强-改版.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>
<link rel="stylesheet" href="./css/clear.css">
<style>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
user-select: none;
transition: all 0.8s ease;
}
</style>
</head>
<body>
<span></span>
</body>
<script>
// 在你点击位置生产 span 标签
// 让span标签运动起来
var Text = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
var index = 0;
//
var screenHeight = window.innerHeight,
screenWidth = window.innerWidth;
function createdSpan() {
var x = Math.random() * ((screenWidth - 32) - 400) + 400;
var y = Math.random() * (screenHeight - 21)
var span = document.createElement("span")
span.innerText = Text[index];
span.style = `
left: ${x}px;
top: ${y}px;
color: hsl(${parseInt(Math.random() * 360)},100%,50%)
`
index++
index > 11 ? index = 0 : '';
$("body").appendChild(span)
motion(span, x)
}
// 运动
function motion(el,x) {
setTimeout(() => {
el.style.left = `${x - Math.random() * 600}px`
}, 100)
setTimeout(() => {
$("body").removeChild(el)
}, 900)
}
setInterval(()=>{
createdSpan()
}, 300)
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

81
历届学生/zheng-yuqing/项目练习/学生项目/js案例/富强.html Normal file
View File

@@ -0,0 +1,81 @@
<!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>
<link rel="stylesheet" href="./css/clear.css">
<style>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
user-select: none;
transition: all 0.8s ease;
}
</style>
</head>
<body>
</body>
<script>
// 在你点击位置生产 span 标签
// 让span标签运动起来
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var index = 0;
// 定义下标
// Math.random() * (max - min) + min
$("body").onclick = (e) => {
var { x, y } = e;
console.log(x, y)
var span = document.createElement("span")
console.dir(span)
span.innerText = Text[index];
span.style = `
left:${x}px;
top:${y}px;
color:hsl(${parseInt(Math.random() * 360)},100%,50%)
`
// 取随机数整数
index++
index > 11 ? index = 0 : '';
// 判断条件 ? 当条件为真执行 : 当条件为假执行
console.log(span)
$("body").appendChild(span)
// 把子容器span追加在父容器body里面
// span为虚拟dom，不能是字符串
motion(span, y)
}
function motion(el,y) {
setTimeout(() => {
el.style.top = `${y - 100}px`
}, 100)
setTimeout(() => {
$("body").removeChild(el)
}, 900)
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

65
历届学生/zheng-yuqing/项目练习/学生项目/js案例/搜索建议.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>搜索建议</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
</body>
<script>
// 给输入框绑定 oninput 事件 ，实时获取输入框的数值
// 然后从我们内置的数组中找到匹配项
// 搜索结果的关键字 加红 表示
var input = $("input")
keyWord = ['html学习', '不想学html', '学习html和css', '天气不好', '今天心情不好', 'css入门学习', '心情很好'],
newArr = []
input.oninput = () => {
console.dir(input.value)
newArr = []
if (input.value.length != 0) {
keyWord.forEach((value, index) => {
if (value.includes(input.value)) {
var newText = value.replace(input.value,`<span style="color: red">${input.value}</span>`)
newArr.push(newText )
}
});
console.log(newArr)
renderPage()
}
else{
$("ul").innerHTML = ""
// 清除网页记录
}
}
function renderPage() {
$("ul").innerHTML = ""
newArr.forEach((value, index) => {
$("ul").innerHTML += `<li>${value}</li>`
})
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>