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;
}

148
历届学生/zheng-yuqing/项目练习/上课项目/js案例/index.html Normal file
View File

@@ -0,0 +1,148 @@
<!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="http://at.alicdn.com/t/font_2223989_98p80aj9eus.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul class="menu hidden">
<li>
<i class="iconfont icon-vue"></i>
<span>Vue 文档</span>
</li>
<li>
<i class="iconfont icon-react"></i>
<span>React 文档</span>
</li>
<li>
<i class="iconfont icon-angular"></i>
<span>Angular 文档</span>
</li>
<li>
<i class="iconfont icon-typescript"></i>
<span>Typescript 文档</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>刷新</span>
</li>
</ul>
</body>
<script>
var body = $("body"),
menu = $(".menu");
var screenHeight = window.innerHeight,
screenWidth = window.innerWidth;
body.oncontextmenu = function (e) {
// 对象解构赋值
var { x, y } = e;
if ((screenHeight - y < 240) && (screenWidth - x < 180)) {
console.log("屏幕右下角");
menu.style = `
left: ${x - 180}px;
top: ${y - 240}px;
`
// 鼠标在屏幕最下面
} else if (screenHeight - y < 240) {
console.log("鼠标在屏幕最下面");
menu.style = `
left: ${x}px;
top: ${y - 240}px;
`
// 屏幕最右边
} else if (screenWidth - x < 180) {
console.log("屏幕最右边");
menu.style = `
left: ${x - 180}px;
top: ${y}px;
`
// 中间方向，空间足够的情况下直接显示
} else {
menu.style = `
left: ${x}px;
top: ${y}px;
`
}
menu.classList.remove("hidden")
// 阻止浏览器弹出默认菜单
return false;
}
// 当 body 区域被点击的时候，需要隐藏右键菜单
body.onclick = function (e) {
console.log("body被点击: ", e);
hiddenMenu()
}
// 菜单里面的li被点击的时候
_(".menu li").forEach((v, i) => {
v.onclick = (e) => {
// 阻止事件冒泡，从而触发父元素body上的点击事件
e.stopPropagation()
// 根据你点击的li标签跳转不同的页面
switch (i) {
case 0:
open("https://cn.vuejs.org/")
break;
case 1:
open("https://react.docschina.org/")
break;
case 2:
open("https://angular.cn/")
break;
case 3:
open("https://www.tslang.cn/")
break;
case 4:
location.reload()
break;
default:
break;
}
hiddenMenu()
}
})
// 隐藏显示的右键菜单
function hiddenMenu() {
// 为menu菜单添加隐藏类名
menu.classList.add("hidden")
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

63
历届学生/zheng-yuqing/项目练习/上课项目/js案例/tab.html Normal file
View File

@@ -0,0 +1,63 @@
<!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="http://at.alicdn.com/t/font_2223989_98p80aj9eus.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/tabs.css">
</head>
<body>
<ul class="tabs_title">
<li class="active">首页</li>
<li>科技</li>
<li>社会</li>
<li>军事</li>
</ul>
<ul class="tabs_content">
<li class="active">首页的内容</li>
<li>科技的内容</li>
<li>社会的内容</li>
<li>军事的内容</li>
</ul>
</body>
<script>
var tabsTitle = _(".tabs_title li"),
tabsContent = _(".tabs_content li");
console.log(tabsTitle, tabsContent);
tabsTitle.forEach((v,i) => {
// 为所有标题li标签绑定事件
v.onclick = () => {
// 清除 所有 li 标签的样式
tabsTitle.forEach((item,index) => {
item.className = ""
tabsContent[index].className = ""
})
// 为你点击的li标签添加激活样式
v.classList.add("active")
// 为内容的li标签添加样式
tabsContent[i].classList.add("active")
}
})
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

27
历届学生/zheng-yuqing/项目练习/上课项目/js案例/事件冒泡.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>
<div class="main">
<h2>你好</h2>
</div>
</body>
<script>
document.querySelector(".main").onclick = function () {
alert("main")
}
document.querySelector(".main h2").onclick = function (e) {
e.stopPropagation();
alert("h2")
}
</script>
</html>

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

@@ -0,0 +1,145 @@
<!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) => {
// 所有li标签未打开
v.isOpen = false;
// 手指按下
v.ontouchstart = (e) => {
console.log('ontouchstart',e);
// 保存你按下的坐标X点
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];
// 把滑动距离 toFixed 进行四舍五入，但是 toFixed 返回的是 string
// Number 进行 string 转 number
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>

78
历届学生/zheng-yuqing/项目练习/上课项目/js案例/富强-改版.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>
<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);
var y = Math.random() * ((screenHeight - 21) - 600) + 600;
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, y)
}
// 运动
function motion(el,y) {
setTimeout(() => {
el.style.top = `${y - Math.random() * 600}px`
}, 100)
setTimeout(() => {
$("body").removeChild(el)
}, 900)
}
setInterval(()=>{
createdSpan()
}, 300)
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

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

@@ -0,0 +1,72 @@
<!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;
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, 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>

67
历届学生/zheng-yuqing/项目练习/上课项目/js案例/搜索建议.html Normal file
View File

@@ -0,0 +1,67 @@
<!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 = () => {
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)
}
});
renderPage()
} else {
$("ul").innerHTML = ""
}
}
// 将 newArr 显示到页面上
function renderPage() {
$("ul").innerHTML = ""
newArr.forEach((value, index) => {
$("ul").innerHTML += `<li>${value}</li>`
})
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>