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

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

40
历届学生/font-end-nine/项目练习/上课项目/js案例/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>
// 1 点击显示(block)和隐藏（display: none）元素
// 思路：
// 1 给button 绑定 点击事件
// 2
// 2 显示的时候随机变化颜色
// hsla 来实现的
var button = $("button"), text = $(".text");
button.onclick = function () {
if (text.style.display == "block") {
text.style.display = "none"
} else {
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

91
历届学生/font-end-nine/项目练习/上课项目/js案例/tab.html Normal file
View File

@@ -0,0 +1,91 @@
<!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>tab</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");
// for (var i = 0; i < titleLi.length; i++) {
// console.log(titleLi[i]);
// }
// NodeList.prototype.forLb = function(callback) {
// for (let i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
titleLi.forEach(function(v, i) {
v.onclick = function () {
titleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

154
历届学生/font-end-nine/项目练习/上课项目/js案例/tabs_改版.html Normal file
View File

@@ -0,0 +1,154 @@
<!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>tab</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">
</ul>
<ul class="content">
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
// json
// js object + array 的组合
var tabs = [
{
title: '首页',
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
{ text: '首页的内容4' },
{ text: '首页的内容5' },
]
},
{
title: '社会',
content: [
{ text: '社会 的内容1' },
{ text: '社会 的内容2' },
{ text: '社会 的内容3' },
]
},
{
title: '军事',
content: [
{ text: '军事 的内容1' },
{ text: '军事 的内容2' },
{ text: '军事 的内容3' },
]
},
{
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
function renderTitle() {
tabs.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
})
renderContent();
var titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
}
function renderContent() {
tabs.forEach((v, i) => {
$(".content").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">
<li class="${i == 0 ? 'active' : ''}"
${v.content.map(j => {
return `<p>${j.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`
})
}
renderTitle();
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
// map
var a = [1, 2, 3, 4, 5, 6].map(v => {
return v
})
console.log(a);
</script>
</html>

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/下拉滚动代码/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 B

219
历届学生/font-end-nine/项目练习/上课项目/js案例/下拉滚动代码/index.html Normal file
View File

@@ -0,0 +1,219 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.header 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="header">
<img src="./back.png" alt="">
<span>热门视频</span>
<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>列表9</li>
<li>列表10</li>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./refresh.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener('scroll', () => isTop() ? addMove() : '')
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY
});
$(".content").addEventListener('touchmove', (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>

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/下拉滚动代码/refresh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

179
历届学生/font-end-nine/项目练习/上课项目/js案例/侧滑.html Normal file
View File

@@ -0,0 +1,179 @@
<!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,
ul,
li {
margin: 0;
padding: 0;
}
.main {}
.main ul {
overflow: hidden;
}
.main ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
.main .item {
width: 100%;
}
.main .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: -180px;
}
.main .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">新闻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="item">新闻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="item">新闻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>9
<script>
var startX = 0;
_(".main li").forEach((v, i) => {
// v.open = false
v.addEventListener('touchstart', (e) => {
startX = e.targetTouches[0].screenX;
_(".main li").forEach((j, index) => {
if (index != i) {
j.style.transform = `translateX(0px)`;
}
})
console.log("startX: ", startX);
})
v.addEventListener('touchmove', (e) => {
var moveX = e.targetTouches[0].screenX;
console.log('moveX',moveX);
// 左滑
if (startX > moveX) {
if (!v.open) {
var x = moveX - startX
console.log("左滑：",);
v.style.transform = `translateX(${x < -180 ? -180 : x}px)`;
v.open = true
}
} else {
if (v.open) {
var newX = -180 + (moveX - startX)
v.style.transform = `translateX(${newX <= 0 ? newX : 0}px)`;
console.log("右滑");
}
}
})
v.addEventListener('touchend', (e) => {
var endX = e.changedTouches[0].screenX;
var ox = endX - startX;
console.log('endX',endX,);
// 左滑
if (startX > endX) {
if (ox > -60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
// 右滑
} else {
console.log("ox: ", ox);
if (ox > 60) {
v.style.transform = `translateX(0px)`;
v.open = false
} else {
v.style.transform = `translateX(-180px)`;
}
}
})
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

94
历届学生/font-end-nine/项目练习/上课项目/js案例/右键菜单.html Normal file
View File

@@ -0,0 +1,94 @@
<!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.preventDefault();
var { x, y } = e;
var { clientWidth, clientHeight } = document.body;
if (clientWidth - x < 152 && clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - 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>

71
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.css Normal file
View File

@@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont"; /* Project id 3445167 */
src: url('iconfont.woff2?t=1655693871496') format('woff2'),
url('iconfont.woff?t=1655693871496') format('woff'),
url('iconfont.ttf?t=1655693871496') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e6a7";
}
.icon-yulanxuanzhuan:before {
content: "\e627";
}
.icon-quanping:before {
content: "\e626";
}
.icon-suoxiao:before {
content: "\ec13";
}
.icon-fangda:before {
content: "\ec14";
}
.icon-beijingyibiyi:before {
content: "\e64f";
}
.icon-fanhui:before {
content: "\e601";
}
.icon-yunshangchuan:before {
content: "\e600";
}
.icon-xiazai:before {
content: "\e668";
}
.icon-sousuo:before {
content: "\e752";
}
.icon-z044:before {
content: "\e630";
}
.icon-jiahao:before {
content: "\eaf3";
}
.icon-gengduo:before {
content: "\e620";
}
.icon-shuaxin:before {
content: "\e631";
}

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.woff Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.woff2 Normal file
View File

Binary file not shown.

83
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/preview.css Normal file
View File

@@ -0,0 +1,83 @@
.preview {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.preview_task {
width: 100%;
height: 100%;
background: #0000008a;
position: absolute;
z-index: -1;
}
.preview_wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview_img {
height: 100%;
position: relative;
z-index: 10;
}
.preview_close {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
z-index: 9;
font-size: 28px;
}
.navigation {
position: absolute;
z-index: 9;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 27px;
background: #939090;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
.navigation_left {
left: 10px;
}
.navigation_right {
right: 10px;
}
.preview_list {
width: 282px;
height: 44px;
position: absolute;
z-index: 11;
left: 50%;
bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-50%);
padding: 0 23px;
background-color: #606266;
box-sizing: border-box;
border-radius: 22px;
color: #fff
}
.preview_list .preview_list_item {
cursor: pointer;
}
.preview_list .right {
transform: rotateY(180deg);
}

67
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/index.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">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/preview.css">
<title>图片预览</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
width: 200px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
<script>
var img = [
'https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img1.baidu.com/it/u=2638231904,4072091792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=2311492523,2796016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
];
img.forEach(v => {
$(".main").innerHTML += ` <img src="${v}" alt="">`
})
_(".main img").forEach((v, i) => {
v.onclick = () => {
console.log(v);
new PicturePreview({
index: i,
arr: img
})
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

195
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/index.js Normal file
View File

@@ -0,0 +1,195 @@
// class 类
// 其实就是现实生活中具体事物在编程中的表现
// 莫一个事物具体的属性(变量)和功能（方法）
// 构造函数 constructor
// 类被初始化(new)的时候，第一个默认执行的方法
// 做参数的接受和保存
// 本质上就是 object
// 语法糖
class PicturePreview {
scale = 1;
rotate = 0;
constructor(params) {
this.params = params;
this.initHtml();
}
initHtml () {
this.$("body").insertAdjacentHTML('beforeend', `
<div class="preview">
<div class="preview_task"></div>
<div class="preview_wrap">
<img style="transform: scale(${this.scale}) rotate(${this.rotate}deg);margin-left: 0px;margin-top: 0px;" class="preview_img" src="${this.params.arr[this.params.index]}" alt="">
</div>
<div class="preview_close iconfont icon-close"></div>
<div class="navigation navigation_left iconfont icon-fanhui"></div>
<div class="navigation navigation_right iconfont icon-gengduo"></div>
<div class="preview_list">
<div class="iconfont icon-suoxiao preview_list_item"></div>
<div class="iconfont icon-fangda preview_list_item"></div>
<div class="iconfont icon-quanping sf preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan left preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan right preview_list_item"></div>
</div>
</div>
`)
this.bindEvents()
}
bindEvents() {
this.$(".preview_wrap img").onmousedown = (e) => {
e.preventDefault();
this.startX = e.x;
this.startY = e.y;
this.status = true
this.oldLeft = parseInt(this.$(".preview_wrap img").style.marginLeft)
this.oldTop = parseInt(this.$(".preview_wrap img").style.marginTop)
this.moveEl(".preview_wrap img")
this.$(".preview_wrap img").onmouseout = (e) => {
this.$(".preview_wrap img").onmousemove = null
if ( this.status) {
this.moveEl(".preview_wrap")
}
}
}
this.$(".preview_wrap img").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap img").onmousemove = null
}
this.$(".preview_wrap").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap").onmousemove = null
}
this.$(".preview_close").onclick = () => {
this.$("body").removeChild(this.$(".preview"))
}
// 上一页
this.$(".icon-fanhui").onclick = () => {
this.params.index -= 1
if (this.params.index < 0) {
this.params.index = 0
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
// 下一页
this.$(".icon-gengduo").onclick = () => {
this.params.index += 1
if (this.params.index > (this.params.arr.length -1)) {
this.params.index = this.params.arr.length -1
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
this.$(".icon-suoxiao").onclick = () => {
this.scale -= 0.2;
if (this.scale <= 0.2) {
this.scale = 0.2
}
this.transform()
}
this.$(".icon-fangda").onclick = () => {
this.scale += 0.2;
this.transform()
}
this.$(".left").onclick = () => {
this.rotate -= 90
this.transform()
}
this.$(".right").onclick = () => {
this.rotate += 90
this.transform()
}
this.$(".sf").onclick = () => {
this.scale = 1
this.rotate = 0
this.transform()
if (this.$(".sf").classList.contains("icon-quanping")) {
this.$(".preview_wrap img").style.height = "auto"
this.$(".sf").classList.replace("icon-quanping", "icon-beijingyibiyi")
} else {
this.$(".preview_wrap img").style.height = "100%"
this.$(".sf").classList.replace("icon-beijingyibiyi", "icon-quanping")
}
}
}
transform() {
this.$(".preview_wrap img").style = `
transform: scale(${this.scale}) rotate(${this.rotate}deg);
margin-left: ${parseInt(this.$(".preview_wrap img").style.marginLeft)}px;
margin-top: ${parseInt(this.$(".preview_wrap img").style.marginTop)}px;
`
}
moveEl(className) {
this.$(className).onmousemove = (e) => {
e.stopPropagation();
e.preventDefault();
var endX = e.x - this.startX;
var endY = e.y - this.startY;
this.$(".preview_wrap img").style.marginLeft = `${endX + this.oldLeft}px`
this.$(".preview_wrap img").style.marginTop = `${endY + this.oldTop}px`
}
}
$(className) {
return document.querySelector(className)
}
}
// 箭头函数会解绑（释放） this 执行
// bind call apply
// var PicturePreview = {
// init (test) {
// console.log(this);
// this.a = test;
// },
// getA: function() {
// console.log(this.a);
// }
// }
// window.PicturePreview.init()

139
历届学生/font-end-nine/项目练习/上课项目/js案例/富强.html Normal file
View File

@@ -0,0 +1,139 @@
<!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;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
// 1：在鼠标点击的位置，依次显示字
// 1 为body绑定点击事件，然后拿到 x,y坐标，设置到 span(使用js创建) 标签上
// 2 把做好的span 放到body上
// 2: 让文字运动起来
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0;
$("body").onclick = function (e) {
var time = null;
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;
console.log("span.move: ", span.move);
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 motion(el, y) {
// time = setTimeout(function fn() {
// el.move+=4;
// console.log("el.move: ", el.move);
// if (el.move > 100) {
// setTimeout(() => $("body").removeChild(el),300)
// clearTimeout(time)
// } else {
// el.style.top = `${y - el.move}px`
// time = setTimeout(fn, 1000/60)
// }
// }, 1000/60)
// setTimeout(function () {
// $("body").removeChild(el)
// }, 800)
}
function $(className) {
return document.querySelector(className)
}
// 箭头函数
// var a = test => console.log("test")
// a(1)
// 闭包
// 函数内部的函数访问外部变量的过程
// 为了解决：变量缓存的问题
function a() {
var c = 1
function test() {
c++
return c;
}
return test
}
var t = a();
console.log(t());
console.log(t());
var c = a();
console.log(c());
</script>
</html>

62
历届学生/font-end-nine/项目练习/上课项目/js案例/搜索建议.html Normal file
View File

@@ -0,0 +1,62 @@
<!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>
</style>
</head>
<body>
<input type="text" placeholder="请输入搜索关键字">
<ul>
</ul>
</body>
<script>
// 1 给输入框绑定 oninput 输入事件，实时获取输入的数值
// 2 拿到用户输入的 关键字，去搜索建议的数组中，找到包含这个关键字的数据
// 3 拿到匹配的数据后，需要保存到 新的数组 中
// 4 渲染 新数组 ，显示到 ul 中
// 5 实现 匹配的 关键词 加红色突出显示
// 天气
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
var searchList = [];
$("input").oninput = function () {
searchList = []
if ($("input").value.length != 0) {
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
var span = `<span style="color: red;">${ $("input").value }</span>`
searchList.push(v.replace($("input").value, span))
}
});
renderLi();
} else {
$("ul").innerHTML = ""
}
}
function renderLi() {
$("ul").innerHTML = ""
searchList.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

190
历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/css/index.css Normal file
View File

@@ -0,0 +1,190 @@
* {
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;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.ground {
position: absolute;
width: 100%;
height: 112px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.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;
}
.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 birdMotion {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlueMotion {
0% {
background: url("../img/hn_blue_1.png");
}
50% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRedMotion {
0% {
background: url("../img/hn_red_1.png");
}
50% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .play {
width: 60px;
margin-top: 20px;
cursor: pointer;
}
.start .bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.start .bird_list img {
cursor: pointer;
}
.start .bird_list img:nth-child(2){
margin: 0 30px;
}
.start .menu {
margin: 20px 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #00000038;
color: #fff;
border-radius: 6px;
}
.start .menu .item {
width: 100%;
height: 100%;
text-align: center;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.start .menu .item:first-child {
border-bottom: 0.5px solid #b9b9b9;
}
.pause {
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
z-index: 999;
}
.show {
display: block !important;
}
.hidden {
display: none !important;
}
audio {
display: none;
}

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/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/back_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 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/hn_blue_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/hn_blue_2.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/hn_blue_3.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/hn_red_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/hn_red_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/hn_red_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/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/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

47
历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!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">
</head>
<body>
<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="menu">
<div class="item simple">普通难度</div>
<div class="item Infernal">地狱难度</div>
</div>
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<img class="play hidden" src="./img/start.png" alt="">
</div>
<div class="bird" style="top: 0px; animation: birdMotion 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/utils.js"></script>
<script src="./js/index.js"></script>
</html>

310
历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/js/index.js Normal file
View File

@@ -0,0 +1,310 @@
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
// 鸟的默认主题
birdTheme = "birdMotion";
constructor() {
this.settingAction();
this.bindEvent();
this.birdAction();
this.groundAction();
this.resultAction()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime)
// this.createdWaterPipe();
}
settingAction() {
// 换鸟主题的功能
_(".bird_list img").forEach((v, i) => {
v.onclick = () => {
switch (i) {
case 0:
this.birdTheme = "birdMotion"
break;
case 1:
this.birdTheme = "birdBlueMotion"
break;
case 2:
this.birdTheme = "birdRedMotion"
break;
default:
break;
}
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
}
})
click(".menu .simple", () => {
this.startGame()
})
click(".menu .Infernal", () => {
this.startGame()
})
}
startGame() {
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameStatus()
}
bindEvent() {
click(".play", () => this.startGame())
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
})
}
changeGameStatus() {
if (this.gameStatus) {
// 暂停游戏
$(".start").remove("hidden")
$(".pause").add("hidden")
$(".menu").add("hidden")
$(".bird_list").add("hidden")
$(".play").remove("hidden")
this.gameStatus = false
} else {
// 开始游戏
$(".result").remove("hidden")
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite`
$(".start").add("hidden")
$(".pause").remove("hidden")
this.gameStatus = true
}
}
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
BumpGround(type) {
var GroundYStart = this.innerHeight - 112;
if (type = 1) {
GroundYStart -= 34
}
var birdBTop = $(".bird").offsetTop + $(".bird").offsetHeight;
if (birdBTop >= GroundYStart) {
console.log("碰到地板了");
this.gameOver();
}
}
birdAction() {
var clcikTime = 0, currentTime = 0;
// 设置鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
$(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite, birdShake 0.4s linear infinite`;
setInterval(() => {
if (this.gameStatus) {
this.BumpGround("1")
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
this.BumpGround("2")
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;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
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) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @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();
} else {
if ((el2.offsetLeft + el2.offsetWidth) == 100) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
$(".point").play()
this.resultAction()
if (this.TotalScore >= 10) {
$("body").style.backgroundImage = `
url("./img/back_dark.png")
`
}
}
}
}
}
gameOver() {
$(".hit").play()
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
var gameOver = document.createElement("img")
gameOver.src = "./img/gameover.png"
$(".start").replaceChild(gameOver, $(".logo"))
click(".play", () => location.reload())
}
}
new bird()

29
历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/js/utils.js Normal file
View File

@@ -0,0 +1,29 @@
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.

1
历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/笔记.txt Normal file
View File

@@ -0,0 +1 @@
作业之一 换鸟的主题

50
历届学生/font-end-nine/项目练习/上课项目/js案例/滚动固定.html Normal file
View File

@@ -0,0 +1,50 @@
<!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: 30000px;
}
.header {
width: 100%;
height: 50px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header");
$("body").onscroll = function () {
if (document.documentElement.scrollTop > 100) {
header.className = "header fixed"
} else {
header.className = "header"
}
console.log("页面被滚动了");
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

193
历届学生/font-end-nine/项目练习/上课项目/js案例/红包雨.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>