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

193
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/hby.html Normal file
View File

@@ -0,0 +1,193 @@
<!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;
width: 100%;
height: 100vh;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: -96px;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #0000008c;
z-index: 9999;
display: none;
}
.center {
width: 40%;
background: #fff;
padding: 15px 10px;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ebe9e9;
}
.content {
padding: 20px 0;
text-align: center;
}
.footer {
display: flex;
justify-content: flex-end;
}
.footer .ok {
padding: 3px 15px;
background: #2a6bf4;
color: #fff;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dialog">
<div class="center">
<div class="title">提示</div>
<div class="content"></div>
<div class="footer">
<div class="ok">确定</div>
</div>
</div>
</div>
</body>
<script>
// 1 随机创建 红包
// 获取屏幕宽度（x）,减去 红包的宽度，高度-
// 2 红包运动
//
// 3 点击开红包
//
var { clientWidth, clientHeight } = document.body;
var createdNumber = null, clickImg = null, count = 0;
// 创建红包
function CreatedHb() {
var img = document.createElement("img");
var x = Math.random() * (clientWidth - 80)
img.src = "./hb.png";
img.move = 0;
img.style.left = `${x}px`;
img.onclick = () => {
count += 1;
if (count <= 3) {
clickImg = img;
clearInterval(createdNumber)
_("img").forEach(v => {
clearTimeout(v.time)
})
WinPrize();
} else {
$(".content").innerText = "三次抽奖已经用完"
$(".dialog").style.display = "block"
}
}
$("body").appendChild(img)
motion(img, -96)
}
function WinPrize() {
$(".dialog").style.display = "block"
var num = Math.random();
if (num > 0 && num <= 0.5) {
$(".content").innerText = "恭喜您中了九折"
} else if (num > 0.51 && num <= 0.995) {
$(".content").innerText = "恭喜您中了八折"
} else {
$(".content").innerText = "恭喜您中了五折"
}
}
// 关闭按钮
$(".footer .ok").onclick = () => {
$(".dialog").style.display = "none"
$("body").removeChild(clickImg)
clearTimeout(clickImg.time)
_("img").forEach(v => {
motion(v, -96)
})
auto();
}
function motion(el, top) {
el.time = setTimeout(function fn() {
el.move += 4;
if (el.move > (clientHeight + 96)) {
$("body").removeChild(el)
clearTimeout(el.time)
} else {
el.style.top = `${top + el.move}px`
el.time = setTimeout(fn, 1000 / 60)
}
}, 1000 / 60)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
function auto() {
createdNumber = setInterval(() => {
CreatedHb()
}, 500)
}
auto()
</script>
</html>

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/img/refrash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

38
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>
<button>点我</button>
<div style="display: block;" class="text">哈哈哈哈</div>
</body>
<script>
var button = $("button"), text = $(".text");
//定义一个变量存放html的button 以及class为text的div
button.onclick = function() {
//定义按钮点击事件
if (text.style.display == "block") {
text.style.display = "none"
//如果当前div显示就让它隐藏
} else {
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
//否则就让它显示 并且设置随机颜色 random()是从0——1中随机生成一个随机数
}
}
function $(className) {
return document.querySelector(className)
}
//定义一个通用方法传递className的值
</script>
</html>

85
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/tab.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">首页</li>
<li>社会</li>
<li>军事</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>社会 的内容</li>
<li>军事 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".title li"),contentLi = _(".content li")
//定义一个变量存放所有html里面title content 里面的li
titleLi.forEach(function(v,i){
//对titleli 进行遍历 v存放titleli里面的值 i存放的是下标
v.onclick = function () {
//对v(titleli里面的值)设置点击事件
titleLi.forEach(function(value,item){
//再次对titleli进行遍历 value存放titleli里面的值 item存放的是下标
value.className = ""
//对所有titleli里面的数值class属性设为空值
contentLi[item].className = ""
//对所有contentLi里面的数值class属性设为空值（因为下标相对应）
})
v.className = "active"
//对点击的v设置 active 属性
contentLi[i].className = "active"
//因为titleli 和 contentli 里面的下标相对应 所以contentli也可以使用
//并且给contentli 用下标对应的li 也设置 active 属性
}
})
function _(className){
return document.querySelectorAll(className)
}
//querySelectorAll 设置所有元素
</script>
</html>

203
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/下拉刷新.html Normal file
View File

@@ -0,0 +1,203 @@
<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;
}
.hearder {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.hearder img {
width: 20px;
height: 20px;
}
.content {
margin-top: 45px;
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="hearder">
<span>热门视频</span>
</div>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./img/refrash.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener(`scroll`, () => isTop() ? addMove() : '')
console.log(isTop());
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY;
});
$(".content").addEventListener('touchstart', (e) => {
if(isTop()) {
moveY = e.targetTouches[0].pageY;
if (moveY > startY) {
e.preventDefault();
var sTop = moveY - startY;
if(sTop > 120) {
$(".refresh").style = `
top :${sTop}px
transform: rotate(${sTop * 3}deg)
`;
}
}
}
});
$(".content").addEventListener('touchend', (e) => {
endY = e.changedTouches[0].pageY;
var eTop = endY - startY;
if (eTop <= 60) {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
}else {
$(".refresh").className = "refresh rotate"
$(".refresh").style = `
top: 80px;
transform: rotate(0}deg);
`;
setTimeout(() => {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
$(".refresh").className = "refresh"
}, 2000)
}
});
}
function isTop() {
return document.documentElement.scrollTop == 0 ? true : false
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

97
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/右键菜单.html Normal file
View File

@@ -0,0 +1,97 @@
<!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 {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
//设置在网页上的右击事件 并且（e）代表的是右击事件的形参
e.preventDefault();
//取消网页上自带的右击事件
var { x, y } = e;
var { w, h } = document.body;
//定义两个数组一个存放当前右击的x轴 y轴坐标
//另一个存放页面的宽和高 注意：要给boby设置高度
if (w - x < 152 && h - y < 160) {
//如果屏幕宽度减去当前右击x轴坐标小于我们所定义元素宽度
// 并且屏幕高度减去当前右击y轴坐标小于我们所定义元素高度时
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
//我们所定义的元素所在位置为元素自身所在的x,y轴减去元素本身的宽高
//也就是当在右下角点击时弹窗在左上
} else if (w - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
//
} else if (h - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

81
历届学生/font-end-nine/项目练习/学生项目/杨锐/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>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0;
$("body").onclick = function (e) {
var {x , y} = e;
var span = document.createElement("span");
span.innerText = textArr[index]
span.style = `
left:${x}px;
top: ${y}px;
`;
index++
index > 11 ? index = 0 :''
span.move = 0
$("body").appendChild(span)
function motion() {
span.move += 4;
if (span.move > 100) {
setTimeout(() => $("body").removeChild(span), 300)
// clearTimeout(time)
cancelAnimationFrame(time)
} else {
span.style.top = `${y - span.move}px`
time = requestAnimationFrame(motion)
}
}
motion ()
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

67
历届学生/font-end-nine/项目练习/学生项目/杨锐/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>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul>
</ul>
</body>
<script>
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
//定义一个数组
var cunfang = [], input = $("input");
//定义一个空数组 以及一个变量
input.oninput = function () {
//定义一个用户在input搜索框中输入时发生事件
cunfang = []
//数组清空
if (input.vlue != 0) {
//当搜索框有有数据时
arr.forEach(function (v, i) {
//通过foreach遍历arr数组中的所有元素存放在v中，下标在i中
if (v.includes(input.vlue)) {
//通过includes判断输入时的值是否在arr数组中
var span = `<span style="color:red">${input.vlue}</span>`
cunfang.push(v.replace(input.vlue, span))
//如果在向cunfang数组添加v中的值并且使相同字符串变成红色
}
});
renderLi();
//调用renderLi函数
}
else {
$("ul").innerHTML = ""
//否则就清空
}
}
function renderLi() {
$("ul").innerHTML = ""
//先清空字符串
cunfang.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
//再遍历cunfang组数向里面添加v值
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

170
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/css/index.css Normal file
View File

@@ -0,0 +1,170 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
/* 等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 */
position: relative;
overflow: hidden;
/* 超过部分隐藏 */
user-select: none;
/* 属性规定是否能选取元素的文本 */
}
.ground {
position: absolute;
width: 100%;
height: 112px;
/* 高度为图片本身高度 */
left: 0;
right: 0;
bottom: 0;
}
.pause {
z-index: 1111;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
left: 100px;
transition: all linear 0.15s;
/* 设置所有属性都有动画属性 以相同速度开始至结束的过渡效果 */
z-index: 999;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
.sg {
width: 55px;
position: absolute;
}
@keyframes birdShake {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
/* 定义一个动画实现来回移动的过程 */
@keyframes yellowbird {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes bluebird {
0% {
background: url("../img/ln1.png");
}
50% {
background: url("../img/ln2.png");
}
100% {
background: url("../img/ln3.png");
}
}
@keyframes redbird {
0% {
background: url("../img/red1.png");
}
50% {
background: url("../img/red2.png");
}
100% {
background: url("../img/red3.png");
}
}
/* 定义一个动画使小鸟有3种动作 */
/* .bird_one {
background: url("../img/hn1.png");
} */
/* 小鸟的初始状态 */
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .difficulty {
cursor: pointer;
background: #00000036;
font-size: 20px;
border-radius: 4px;
}
.start .difficulty .simpleMode{
margin-bottom: 10px;
}
.niao {
position: absolute;
top: 55%;
left: 45%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.niao .yellow {
margin-right: 20px;
}
.niao .blue {
margin-right: 20px;
}
.start .reset {
width: 60px;
margin-top: 20px;
cursor: pointer;
/* 是在计算机中将光标呈现为指示链接的指针（一只手） */
}
.show {
display: block;
}
.hidden {
display: none;
}
/* 定义两个通用css */

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/atlas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/diban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/hn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/hn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/hn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/hyback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/ln1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/ln2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/ln3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/red1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/red2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/red3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/sg_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/sg_t.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/img/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

48
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!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/index.css">
<!-- <link rel="stylesheet" href="/项目练习/学生项目/杨锐/css/clear.css"> -->
</head>
<body>
<audio class="ks" src="./sounds/zyfx.mp3" loop></audio>
<audio class="hit" src="./sounds/sfx_hit.ogg"></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<div class="result hidden">
</div>
<img class="pause hidden" src="./img/pause.png" alt="">
<div class="start">
<img class="logo" src="./img/title.png" alt="">
<div class="difficulty">
<div class="simpleMode play">简单模式</div>
<div class="difficultyMode">困难模式</div>
</div>
<img class="reset hidden" src="./img/start.png" alt="">
</div>
<div class="niao">
<img class="yellow" src="./img/hn1.png" alt="">
<img class="blue" src="./img/ln1.png" alt="">
<img class="red" src="./img/red1.png" alt="">
</div>
<div class="bird bird_one" style="top: 0px;animation: yellowbird 0.4s linear infinite;" ></div>
<div class="ground">
<img class="groundOne" src="./img/diban.png" alt="">
<img class="groundTwo" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/public.js"></script>
<script src="./js/index.js"></script>
</html>

415
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/js/index.js Normal file
View File

@@ -0,0 +1,415 @@
class bird {
// 游戏的默认状态 false 未开始 true 开始游戏
gameStatus = false;
innerHeight = window.innerHeight;
innerWidth = window.innerWidth;
// 获取当前页面的宽和高
// 鸟的下落速度
birdDownSpeed = 8;
// 鸟的上升速度
birdUpSpeed = 40;
// 地板的移动速度
groundSpeed = 5;
// 上下水管的间隙
WaterPipeClearance = 150
// 水管的左右间隙
WaterPipeLeftRightClearance = 300
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 1000
// 总分
TotalScore = 0
// 鸟的样式
birdThem = "yellowbird"
constructor() {
console.log(this.innerWidth);
this.bindEvent();
this.birdAction();
this.groundAction();
this.resultAction();
this.changSubject()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime)
// this.createdWaterPipe();
}
bindEvent() {
click(".play", () => {
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
$(".ks").play()
// 点击play让所有水管元素运动
this.changeGameStatus()
// 点击play调用changeGameStatus()更改游戏的状态
})
click(".difficultyMode", () => {
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
$(".ks").play()
// 点击play让所有水管元素运动
this.changeGameStatus()
// 点击play调用changeGameStatus()更改游戏的状态
this.difficulty()
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => {
clearInterval(v.time)
})
$(".ks").pause()
// 点击pause让所有水管元素暂停
})
}
//困难模式
difficulty() {
// 鸟的下落速度
this.birdDownSpeed = 10;
// 鸟的上升速度
this.birdUpSpeed = 40;
// 地板的移动速度
this.groundSpeed = 10;
// 上下水管的间隙
this.WaterPipeClearance = 100
// 水管的左右间隙
this.WaterPipeLeftRightClearance = 200
// 生成水管的X轴位置
this.WaterPipeX = 0
// 一秒创建多少个水管
this.createdWaterPipeXTime = 1000
// 总分
this.TotalScore = 0
}
//计算总分
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
//定义一个存放总分的数组并且让数组都为字符串样式
$(".result").innerHTML = ""
//每次开始都清除
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
//遍历数组向其中添加分数的图片
}
// 换主题
changSubject() {
click(".yellow", () => {
this.birdThem = "yellowbird"
$(".bird").style.animation = `${this.birdThem} 0.4s linear infinite`
console.log("黄色");
})
click(".blue", () => {
this.birdThem = "bluebird"
$(".bird").style.animation = `${this.birdThem} 0.4s linear infinite`
})
click(".red", () => {
this.birdThem = "redbird"
$(".bird").style.animation = `${this.birdThem} 0.4s linear infinite`
})
}
changeGameStatus()
// 更改游戏状态
{
if (this.gameStatus)
// 如果游戏状态未开始
{
$(".start").remove("hidden")
$(".pause").add("hidden")
this.gameStatus = false
// 让.start里面类容显示 并给.pause添加隐藏
} else {
$(".niao").add("hidden")
$(".result").remove("hidden")
// 点击开始显示分数
$(".bird").style.animation = `${this.birdThem} 0.4s linear infinite`
$(".start").add("hidden")
$(".pause").remove("hidden")
this.gameStatus = true
// 否则反之，并且给小鸟添加animation动画属性覆盖之前游戏未开始的动画
}
}
birdAction()
// 小鸟的动画属性
{
var clcikTime = 0, currentTime = 0;
// 设置鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
// 并且使小鸟位于屏幕中间 屏幕的高度除二并减去自身的一半
setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
this.zhuangdiban($(".bird"), $(".ground"))
}
// 如果游戏已开始 设置小鸟掉落每次以小鸟本身离top的距离加上下落速度this.birdDownSpeed
}, 1000 / 16)
// 点击屏幕事件
click("body", () => {
if (this.gameStatus) {
// 如果游戏状态为ture
clcikTime = (new Date()).getTime()
// 设置个变量存放当前时间点击时间戳
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
// 给小鸟添加up属性移除down属性 并且让小鸟当前离top的值减去上升的值 也就是使小鸟向上移动
}
})
setInterval(() => {
if (this.gameStatus) {
currentTime = (new Date()).getTime();
// 获取当前时间戳
if (currentTime - clcikTime > 300) {
$(".bird").add("down")
$(".bird").remove("up")
}
// 如果当前时间比上一次点击时间大于300毫秒时给小鸟添加down属性移除up属性
}
}, 300)
}
// 地板运动
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
// 两张图片已设置定位 一张起始位置屏幕左边 另一张起始位置屏幕宽度也就是右边 设置超出部分了隐藏
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
// 使两张图片同时左边移动每次移动距离为当前图片在屏幕左边的距离减去地板移动的速度this.groundSpeed 也就是值越小就向左边移动
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
// 如果地板1的left的距离小于等于负屏幕宽度时（也就是地板1图片移出了屏幕）
// 让地板1 left距离重新为屏幕的宽度也就是放在屏幕的右边
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
// 如果地板2的left的距离小于等于负屏幕宽度时（也就是地板1图片移出了屏幕）
// 让地板2 left距离重新为屏幕的宽度也就是放在屏幕的右边
}, 1000 / 16)
}
// 创建水管
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
// 定义一个变量totalWaterPipeHeight存放屏幕的高度减去地板的高度（112）再减去水管之间的间隙 this.WaterPipeClearance
// 这个变量是来控制两根水管的总高度
var TopWaterPipeHeight = Math.random() * ((totalWaterPipeHeight * 2 / 3) - (totalWaterPipeHeight * 1 / 3)) + (totalWaterPipeHeight * 1 / 3);
// 定义一个变量TopWaterPipeHeight 存放上水管的高度 上水管的高度为一个
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
// 定义一个变量BottomWaterPipeHeight 存放下水管的高度 用水管的总高度减去上水管的高度
// 如果上水管高度小于等于总水管高度的2/3并且下水管高度小于等于总水管高度的2/3时 创建水管否则继续计算上水管高度
if (this.WaterPipeX == 0)
// 如果水管在x轴上的距离为0 也就是还没生成水管时
{
this.WaterPipeX = this.innerWidth
// 第一根水管在x轴的距离就为屏幕的宽度
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
// 否则就为当前水管的x轴上的距离加上水管左右之间的间隙
}
var cretedImg = (type) =>
// 定义一个变量cretedImg 存放函数
{
var img = document.createElement("img");
// 定义一个img存放创建的元素img
img.src = `./img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
//img的地址为当tpye=top时地址为./img/sg_t 否则为./img/sg_b
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
//定义img 样式
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
//定义两个变量存放创建的上水管和下水管
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
//添加上水管以及下水管
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
//水管运动
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
// 让水管每次移动距离为当前的x轴距离减去地板移动的速度（保证水管和地板是同时运动的）
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
// 如果水管的x轴距离小于他本身时 也就是全部移除屏幕时 删除定时器以及元素
} else {
this.collision($(".bird"), img)
// 否则就为它添加碰撞事件
}
}, 1000 / 16)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
this.gameOver();
console.log("碰到了");
//碰撞上了就游戏结束
} else {
console.log("(el2.offsetLeft + el2.offsetWidth)", (el2.offsetLeft + el2.offsetWidth));
if ((el2.offsetLeft + el2.offsetWidth) == 101) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore);
$(".point").play()
this.resultAction()
// 就加一分调用this.resultAction()并添加音乐
if (this.TotalScore > 10) {
$("body").style.backgroundImage = "url(./img/hyback.png) ";
}
}
}
}
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el3 地板
*/
zhuangdiban(el1, el3) {
if (el1.offsetLeft < el3.offsetLeft + el3.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el3.offsetLeft &&
el1.offsetTop < el3.offsetTop + el3.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el3.offsetTop
) {
this.gameOver();
console.log("碰到了");
//碰撞上了就游戏结束
}
}
gameOver() {
$(".hit").play()
// 添加碰撞声音
this.changeGameStatus()
// 改变游戏状态
_(".sg").forEach(v => clearInterval(v.time))
var gameOver = document.createElement("img")
gameOver.src = "./img/gameover.png"
// 添加新的img
$(".start").replaceChild(gameOver, $(".logo"))
// 替换开始的logo
$(".reset").remove("hidden")
click(".reset", () => location.reload())
// 点击开始重新刷新页面
}
}
new bird()

200
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/js/jjj.js Normal file
View File

@@ -0,0 +1,200 @@
class bird {
gameStatus = false;
// 游戏的默认状态 false 未开始 true 开始游戏
innerHeight = window.innerHeight;
innerWidth = window.innerWidth;
// 获取当前页面的宽和高
// 鸟的下落速度
birdDownSpeed = 8;
// 鸟的下落速度
birdUpSpeed = 40;
// 地板的移动速度
groundSpeed = 5;
// 上下水管的间隙
WaterPipeClearance = 150
// 水管的左右间隙
WaterPipeLeftRightClearance = 300
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 500
constructor() {
this.bindEvent();
this.birdAction();
this.groundAction();
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime)
// this.createdWaterPipe();
}
bindEvent() {
// 创建一个绑定事件
click(".play", () => {
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameStatus()
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => {
clearInterval(v.time)
})
})
}
changeGameStatus() {
// 更改游戏状态
if (this.gameStatus)
{
$(".start").remove("hidden")
$(".pause").add("hidden")
// 让.start里面类容显示 并给.pause添加隐藏
this.gameStatus = false
} else {
$(".bird").style.animation = "birdMotion 0.4s linear infinite"
$(".start").add("hidden")
$(".pause").remove("hidden")
this.gameStatus = true
// 否则反之，并且给小鸟添加animation动画属性覆盖之前游戏未开始的动画
}
}
birdAction() {
var clcikTime = 0, currentTime = 0;
// 设置定义鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
setInterval(() => {
if (this.gameStatus);
console.log(this.gameStatus)
{
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
clcikTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
}
})
setInterval(() => {
if (this.gameStatus) {
currentTime = (new Date()).getTime();
if (currentTime - clcikTime > 300) {
$(".bird").add("down")
$(".bird").remove("up")
}
}
}, 300)
}
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
}, 1000 / 16)
}
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `./img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
clearInterval(img.time)
$("body").removeChild(img)
}
}, 1000 / 16)
}
}
new bird()
// 初始化类

33
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/js/public.js Normal file
View File

@@ -0,0 +1,33 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
// 移除方法
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
// 添加方法
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
// 定义点击事件的方法 通过回调函数
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()
// 先调用

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/sfx_die.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/sfx_hit.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/sfx_point.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/sfx_swooshing.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/sfx_wing.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/sounds/zyfx.mp3 Normal file
View File

Binary file not shown.

49
历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/页面滚动.html Normal file
View File

@@ -0,0 +1,49 @@
<!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 {
height: 30000px;
}
.header {
width: 100%;
height: 100px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header");
//获取class为header的元素
$("body").onscroll = function () {
//定义页面的滚动事件
if (document.documentElement.scrollTop > 400) {
//如果页面滚动的高度大于400时
header.className = "header fixed"
//给元素定位通过css属性进行添加
}else{
header.className = "header"
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>