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

25
历届学生/吴欣阳/项目开发/上课项目/js案例/funtion.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>
</body>
<script>
function a (price) {
console.log(price);
price = price -1
return price;
}
var c = a(10);
console.log(c);
</script>
</html>

41
历届学生/吴欣阳/项目开发/上课项目/js案例/game/css/index.css Normal file
View File

@@ -0,0 +1,41 @@
body{
margin: 0;
padding: 0;
background: #87d3ff url("../img/back.png");
height: 100vh;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.people {
position: absolute;
bottom: 0;
width: 100px;
}
.right {
transform: rotateY(180deg);
}
.apple {
width: 40px;
position: absolute;
top: 0px;
}
.boom {
width: 60px;
position: absolute;
top: 0px;
}
.motion {
transition: all ease 0.5s;
}
.totalNums {
position: absolute;
right: 30px;
top: 30px;
font-size: 20px;
color: red;
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/apple.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/apple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/bomb.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/bombimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/boom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/game/img/pepop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

16
历届学生/吴欣阳/项目开发/上课项目/js案例/game/index..html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titl2e</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="totalNums">0分</div>
<img src="./img/pepop.png" style="left: 0" class="people" alt="">
<audio class="appleaudio" hidden controls src="./img/apple.mp3"></audio>
<audio class="boomaudio" hidden controls src="./img/bomb.mp3"></audio>
</body>
<script src="./js/index.js"></script>
</html>

136
历届学生/吴欣阳/项目开发/上课项目/js案例/game/js/index.js Normal file
View File

@@ -0,0 +1,136 @@
var body = $("body"),
people = $(".people"),
clientWidth = document.body.clientWidth,
clientHeight = document.body.clientHeight,
totalNums = 0;
// 1：让人物移动起来
// 2：生成炸弹和苹果（随机生成）
// 3：炸弹 苹果 和 人物的碰撞检测
// 超过屏幕删除
// 如果没有超过屏幕，需要进行碰撞检测
// 炸弹 - 分数
// 苹果 + 分数
body.onmousemove = function (e) {
var x = e.x, moveX = x - 100;
people.style.left = `${moveX < 0 ? 0 : moveX}px`;
// 右移动
if (moveX > clientWidth / 2) {
people.classList.remove("right")
// 左移动
} else {
people.classList.add("right")
}
}
function CreatedResources(type) {
var x = parseInt(Math.random() * clientWidth) - (type == 'apple'? 40 : 60) ;
x < 0 ? x = 0 : x;
var apple = document.createElement("img");
apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
apple.className = type == "apple" ? "apple motion" : "boom motion";
apple.style.left = `${x}px`;
apple.style.top = `${type == 'apple'? -40 : -60}px`;
body.appendChild(apple);
motion(apple, type)
}
function motion (el, type) {
var apple = 0, bmob = 0
if (type == "apple") {
apple = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 30}px`;
if (parseInt(el.style.top) > clientHeight) {
body.removeChild(el)
clearInterval(apple)
} else {
JudgingCollision(el, apple)
}
},60)
} else {
bmob = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 50}px`;
if (parseInt(el.style.top) > clientHeight) {
setTimeout(()=> {
try {
body.removeChild(el)
clearInterval(bmob)
} catch (e) {}
},500)
} else {
JudgingCollision(el,bmob)
}
},80)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = $(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.classList.contains("apple")) {
console.log("苹果");
totalNums+=30;
$(".appleaudio").play()
$(".totalNums").innerText = `${totalNums}分`
setTimeout(()=>{
body.removeChild(span)
clearInterval(timeout)
},540)
} else {
totalNums-=40;
span.src = "./img/bombimg.png"
$(".boomaudio").play()
$(".totalNums").innerText = `${totalNums}分`
setTimeout(()=>{
body.removeChild(span)
clearInterval(timeout)
},540)
console.log("炸弹")
}
}
}
function Created() {
var random = parseInt(Math.random() * 100);
if (random <= 80) {
CreatedResources("bomb")
console.log("生成炸弹")
} else {
CreatedResources("apple")
console.log("生成苹果")
}
}
setInterval(() => {
Created();
},1000)
function $(className) {
return document.querySelector(className)
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/img/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/img/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/img/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

55
历届学生/吴欣阳/项目开发/上课项目/js案例/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!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;
}
.main {
width: 300px;
height: 250px;
margin: 20% auto;
border:1px solid #000;
position: relative;
}
textarea {
width: 100%;
height: 100%;
}
span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea placeholder="请输入留言"></textarea>
<span>0/50</span>
</div>
</body>
<script>
var textarea = document.querySelector("textarea");
var span = document.querySelector("span");
textarea.oninput = function () {
var len = textarea.value.length;
if (len > 50) {
textarea.value = textarea.value.substring(0,50)
} else {
span.innerText = `${len}/50`;
}
}
</script>
</html>

295
历届学生/吴欣阳/项目开发/上课项目/js案例/preview.html Normal file
View File

@@ -0,0 +1,295 @@
<!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_2576965_p89wlanilpr.css">
<style>
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}
</style>
</head>
<body>
<img class="smallImg" src="./img/1.jpg" alt="">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/4.jpg" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</body>
<script>
var suoxiao = $(".suoxiao"),
fangda = $(".fangda"),
fullscreen = $(".fullscreen"),
leftshuaxin = $(".leftshuaxin"),
rightshuaxin = $(".rightshuaxin");
var x1, y1, l, t;
// 当鼠标在图片上按下的时候，修改这个变量为true，
// 如果鼠标滑动超过图片的区域，因为这个变量未true，
// 所以if判断通过，给背景层绑定移动事件实现可以继续拖动图片
// 当用户在背景层松开鼠标后，将这个变量改为false。
// 这样当用户在未按下图片但是从图片上滑动超过图片区域的时候，因为这个变量是false
// 所以不会执行，在背景层滑动鼠标图片也跟着一起移动的事件绑定
var isBackMove = false;
suoxiao.onclick = function () {
var value = Scale() - 0.2;
if (value != 0) {
$(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
}
}
fangda.onclick = function () {
$(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)`
}
fullscreen.onclick = function () {
$(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
}
// -90
leftshuaxin.onclick = function () {
xuanzhuan(-90)
}
// +90
rightshuaxin.onclick = function () {
xuanzhuan(90)
}
// 鼠标在图片上按下的时候
$(".mainImg").onmousedown = function (e) {
console.log("鼠标在图片上按下的时候");
e.preventDefault()
isBackMove = true
//获取鼠标按下的坐标
x1 = e.clientX;
y1 = e.clientY;
l = parseInt($(".mainImg").style.marginLeft);
t = $(".mainImg").offsetTop;
ImgMove(".mainImg")
}
// 按住拖动，但鼠标从图片上离开的
// 给背景层绑定鼠标移动事件
$(".mainImg").onmouseleave = function () {
console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
if (isBackMove) {
ImgMove(".preview")
}
}
// 鼠标在图片上松开
$(".mainImg").onmouseup = function (ev) {
console.log("鼠标在图片上松开");
$(".mainImg").onmousemove = null;
$(".preview").onmousemove = null;
}
// 鼠标在背景层上松开
$(".preview").onmouseup = function (ev) {
console.log("鼠标在背景层上松开");
isBackMove = false
$(".mainImg").onmousemove = null;
$(".preview").onmousemove = null;
}
function ImgMove(className) {
$(className).onmousemove = function (ev) {
var x2 = ev.clientX;
var y2 = ev.clientY;
//计算出鼠标的移动距离
var x = x2 - x1;
var y = y2 - y1;
//移动的数值与元素的left，top相加，得出元素的移动的距离
var lt = y + t;
var ls = x + l;
//更改元素的left，top值
$(".mainImg").style.marginLeft = ls + 'px';
$(".mainImg").style.marginTop = lt + 'px';
}
}
// 左右旋转的代码封装
function xuanzhuan(offset) {
$(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
}
// 获取缩放
function Scale() {
return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
// 获取旋转的数值
function Rotate() {
return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
function $(a) {
return document.querySelector(a)
}
</script>
</html>

119
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/css/previewImage.css Normal file
View File

@@ -0,0 +1,119 @@
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.hidden {
display: none;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
z-index: 999;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
z-index: 999;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 890 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

52
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/index.html Normal file
View File

@@ -0,0 +1,52 @@
<!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/previewImage.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
</head>
<body>
<div class="list"></div>
</body>
<script src="./js/previewImage.js"></script>
<script>
var imgArr = [
'./img/11.png',
'./img/12.jpg',
'./img/13.jpg',
'./img/14.jpg',
'./img/15.png',
'./img/16.jpg',
'./img/17.jpg',
]
imgArr.forEach(function (v) {
document.querySelector(".list").innerHTML += `<img width="100" src="${v}"/>`
});
document.querySelectorAll(".list img").forEach(function (v, i) {
v.onclick = function () {
var c = new PreviewImage({
image: imgArr,
showIndex: i
});
c = null
}
})
</script>
</html>

267
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/js/previewImage.js Normal file
View File

@@ -0,0 +1,267 @@
class PreviewImage {
// 属性都是全局的
body = this.$("body");
option = {};
isBackMove = false;
x1 = 0;
y1 = 0;
l = 0;
t = 0;
constructor(option) {
if (!option.hasOwnProperty("image")) {
throw new Error("参数image缺少，请检查")
}
if (!option.hasOwnProperty("showIndex")) {
throw new Error("参数showIndex缺少，请检查")
}
this.option = option
console.log(this.option);
this.created();
this.BindClose();
this.BindPrevious();
this.BindNext();
this.BindSuoXiao();
this.BindFangDa();
this.BindFullScreen();
this.BindXuanZhuan();
this.MouseEvent();
}
// 1：把图片预览的html插入到网页上
created() {
this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
src="${this.option.image[this.option.showIndex]}" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>`)
}
// 缩小
BindSuoXiao() {
this.$(".suoxiao").onclick = () => {
var value = this.Scale() - 0.2;
if (value != 0) {
this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
}
}
}
// 全屏
BindFullScreen() {
this.$(".fullscreen").onclick = () => {
// true 缩小
if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
this.$(".fullscreen").classList.remove("icon-fullscreen")
this.$(".fullscreen").classList.add("icon-suoxiao1")
this.$(".mainImg").style = `
transform: scale(2) rotate(${this.Rotate()}deg);
margin-left: 0;
margin-top: 0;
`
// 放大
} else {
this.$(".fullscreen").classList.remove("icon-suoxiao1")
this.$(".fullscreen").classList.add("icon-fullscreen")
this.$(".mainImg").style = `
transform: scale(1) rotate(0deg);
margin-left: 0;
margin-top: 0;
`
}
}
}
// 放大
BindFangDa() {
this.$(".fangda").onclick = () => {
this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
}
}
// 旋转
BindXuanZhuan() {
// -90
this.$(".leftshuaxin").onclick = () => {
this.xuanzhuan(-90)
}
// +90
this.$(".rightshuaxin").onclick = () => {
this.xuanzhuan(90)
}
}
MouseEvent() {
// 鼠标滑动的时候放大缩小网页
document.onmousewheel = (e) => {
if (e.wheelDelta == 210) {
this.$(".fangda").onclick()
} else {
this.$(".suoxiao").onclick()
}
}
// document.addEventListener('mousewheel',(e) => {
// if (e.wheelDelta == 210) {
// this.$(".fangda").onclick()
// } else {
// this.$(".suoxiao").onclick()
// }
// },false)
// 鼠标在图片上按下的时候
this.$(".mainImg").onmousedown = (e) => {
e.preventDefault()
this.isBackMove = true
//获取鼠标按下的坐标
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt(this.$(".mainImg").style.marginLeft);
this.t = this.$(".mainImg").offsetTop;
this.ImgMove(".mainImg")
}
// 按住拖动，但鼠标从图片上离开的
// 给背景层绑定鼠标移动事件
this.$(".mainImg").onmouseleave = () => {
console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
if (this.isBackMove) {
this.ImgMove(".preview")
}
}
// 鼠标在背景层上松开
this.$(".preview").onmouseup = (ev) => {
console.log("鼠标在背景层上松开");
this.isBackMove = false
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
// 鼠标在图片上松开
this.$(".mainImg").onmouseup = (ev) => {
console.log("鼠标在图片上松开");
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
}
ImgMove(className) {
this.$(className).onmousemove = (ev) => {
var x2 = ev.clientX;
var y2 = ev.clientY;
//计算出鼠标的移动距离
var x = x2 - this.x1;
var y = y2 - this.y1;
//移动的数值与元素的left，top相加，得出元素的移动的距离
var lt = y + this.t;
var ls = x + this.l;
//更改元素的left，top值
this.$(".mainImg").style.marginLeft = ls + 'px';
this.$(".mainImg").style.marginTop = lt + 'px';
}
}
xuanzhuan(offset) {
this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
}
// 关闭按钮
BindClose() {
//1 var ddddc = this;
//2 es6 => 箭头函数
console.log("this1: ", this);
// this 指向
this.$(".closed").onclick = () => {
this.body.removeChild(this.$(".previewImage"))
}
}
// 上一页
BindPrevious() {
this.$(".left").onclick = () => {
this.option.showIndex -= 1;
if (this.option.showIndex < 0) {
this.option.showIndex = this.option.image.length - 1
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
// 下一页
BindNext() {
this.$(".right").onclick = () => {
this.option.showIndex += 1;
if (this.option.showIndex > this.option.image.length - 1) {
this.option.showIndex = 0
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
Scale() {
return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
Rotate() {
return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
$(className) {
return document.querySelector(className)
}
}

26
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/test.html Normal file
View File

@@ -0,0 +1,26 @@
<!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 id="btn">点我</button>
</body>
<script>
var body = document.body;
var btn = document.getElementById('btn');
body.innerHTML += "<div class='newDiv'>新元素</div>";
btn.onclick = function () {
alert('hello');
}
</script>
</html>

40
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/this.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>
</body>
<script>
// var o = {
// user: "追梦子",
// fn: function () {
// console.log(this);
// console.log(this.user); //追梦子
// }
// }
// // o.fn();
// var a = o.fn
// a()
// function a () {}
// var a = (nums,b) => console.log(nums,b)
// a(1,100)
</script>
</html>

60
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/笔记.txt Normal file
View File

@@ -0,0 +1,60 @@
1: class 类
什么类？现实生活中事物在编程中的映射和封装
面向对象的编程
类的属性
类的方法
构造函数 & 析构函数
封装
继承
多态
class BaseCar {
// 打开车门
open() {
console.log("打开车门");
}
// 关闭车门
close() {
console.log("关闭车门");
}
}
class SmallCar extends BaseCar {
// 属性
speed = null;
// 构造函数
constructor (bbb) {
super()
console.log("类被初始化的时候第一个被自动执行的方法");
this.speed = bbb
}
nomusic() {
console.log("不能播放音乐");
console.log(this.speed);
}
}
class BigCar extends BaseCar {
music() {
console.log("能播放音乐");
}
}
var a = new SmallCar({
test: "参数"
});
// var b = new BigCar();
a.nomusic()

165
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/index.html Normal file
View File

@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
<style>
.swiper-container {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
justify-content: center;
}
.swiper-pagination-item {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.swiper-wrapper {
display: flex;
}
.swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.active {
background: red;
}
.dh {
transition-duration: 300ms;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper dh" style="transform: translateX(0px);">
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<div class="swiper-pagination-item active"></div>
<div class="swiper-pagination-item"></div>
<div class="swiper-pagination-item"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
<div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
</div>
</body>
<script>
var pagination = _(".swiper-pagination .swiper-pagination-item");
var timer;
// 上一页
$(".swiper-button-prev").onclick = function () {
motion(520,'prev')
}
// 下一页
$(".swiper-button-next").onclick = function () {
motion(-520,'next')
}
// 运动
function motion(offset, type) {
var totalDistance = translateX() + offset;
if (totalDistance < -1040) {
totalDistance = 0
}
if (totalDistance > 0) {
totalDistance = -1040
}
SetTranslateX(totalDistance)
// 要去的下一页的下标
var index = Math.abs(totalDistance / 520)
changePagination(index)
}
// 小圆点点击切换轮播图
pagination.forEach((v,i) => {
v.onclick = () => {
changePagination(i)
}
});
function changePagination(i) {
pagination.forEach(item => item.classList.remove("active"))
pagination[i].classList.add("active")
SetTranslateX(i * -520)
}
// 让图片移动
function SetTranslateX(distance) {
$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}
function AutoPlay() {
timer = setInterval(() => {
$(".swiper-button-next").onclick()
},1000)
}
$(".swiper-container").onmouseover = function () {
clearInterval(timer)
}
$(".swiper-container").onmouseleave = function () {
AutoPlay()
}
AutoPlay()
// 返回元素上的距离
function translateX() {
return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

45
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.css Normal file
View File

@@ -0,0 +1,45 @@
.swiper-container {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
justify-content: center;
}
.swiper-pagination-item {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.swiper-wrapper {
display: flex;
}
.swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.active {
background: red;
}
.dh {
transition-duration: 300ms;
}

82
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
<link rel="stylesheet" href="./swiper.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper" style="transform: translateX(0px);">
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i2/6000000008153/O1CN01ApOjk02A67oNUTDKP_!!6000000008153-0-octopus.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
<div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
</div>
<button onclick="test()">点我</button>
</body>
<script src="./swiper.js"></script>
<script>
var lb = new Swiper(".swiper-container",{
loop: false,
autoPlay: false,
autoTime: 1000,
initialSlide: 0,
speed: 300,
on: {
slideChange: (index) => {
console.log(index)
}
}
})
function test() {
lb.slideTo(2)
}
// function a () {
// var test = 1;
// console.log(test) // 1
//
// var c = function () {
// test+=1;
// console.log(test) //2 2
// }
//
// return c;
// }
//
// var ee = a()
//
// ee() // 2
// ee() // 3
//
// // 闭包：函数内部的函数，访问外函数变量的过程
// // 优点：可以对变量进行缓存，避免重复计算
// // 缺点：导致内存占用过高，引发卡顿
</script>
</html>

204
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.js Normal file
View File

@@ -0,0 +1,204 @@
// 自执行函数
// 闭包
(function () {
class Swiper {
config = {
timer: null,
el: '.swiper-container',
width: () => {
return document.querySelector(this.config.el).offsetWidth
},
maxLength: () => {
return document.querySelectorAll(".swiper-slide").length;
},
maxWidth: () => {
return (this.config.maxLength() - 1) * this.config.width()
},
loop: false,
autoPlay: false,
autoTime: 3000,
initialSlide: 0,
speed: 300,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
fx: true,// true 表示向下，false向上奏
on: {}
}
constructor(el, option) {
if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
throw new Error("el参数必传，需要是字符串，并且 选择器需要存在")
}
this.config.el = el;
this.config.loop = option.loop || this.config.loop;
this.config.autoPlay = option.autoPlay || this.config.autoPlay;
this.config.autoTime = option.autoTime || this.config.autoTime;
this.config.initialSlide = option.initialSlide || this.config.initialSlide;
this.config.speed = option.speed || this.config.speed;
this.config.navigation.prevEl = option?.navigation?.prevEl || this.config.navigation.prevEl;
this.config.navigation.nextEl = option?.navigation?.nextEl || this.config.navigation.nextEl;
this.config.pagination.el = option?.pagination?.el || this.config.pagination.el;
this.config.on = option?.on || this.config.on;
console.log( this.config)
this.init();
}
init () {
this.BindNext();
this.BindPrev();
this.createdPagination();
// 设置默认显示第几章图
this.SetTranslateX(this.config.initialSlide * -this.config.width())
this.changePagination(this.config.initialSlide)
// 设置轮播图切换的动画
this.$(".swiper-wrapper").style.transitionDuration = `${this.config.speed}ms`
if (this.config.autoPlay) {
this.AutoPlay();
this.$(this.config.el).onmouseover = () => clearInterval(this.config.timer)
this.$(this.config.el).onmouseleave = () => this.AutoPlay()
}
}
BindNext() {
this.$(this.config.navigation.nextEl) != null
? this.$(this.config.navigation.nextEl).onclick = () => {
this.motion(-this.config.width())
}
: ''
}
BindPrev() {
this.$(this.config.navigation.prevEl) != null
? this.$(this.config.navigation.prevEl).onclick = () => {
this.motion(this.config.width())
}
: ''
}
motion(offset) {
var totalDistance = this.translateX() + offset;
if (!this.config.loop) {
if (totalDistance == -this.config.maxWidth()) {
console.log("移动到最后一张图了")
this.$(this.config.navigation.nextEl).onclick = null;
} else {
this.BindNext();
}
if (totalDistance == 0) {
console.log("移动到第一张图了")
this.$(this.config.navigation.prevEl).onclick = null
} else {
this.BindPrev()
}
}
if (totalDistance < -this.config.maxWidth()) {
totalDistance = 0
}
if (totalDistance > 0) {
totalDistance = -this.config.maxWidth()
}
this.SetTranslateX(totalDistance)
// 要去的下一页的下标
var index = Math.abs(totalDistance / this.config.width())
this.changePagination(index)
}
// 生成小圆点
createdPagination() {
if (this.$(this.config.pagination.el) != null ) {
for (var i = 0; i < this.config.maxLength(); i++) {
this.$(this.config.pagination.el).innerHTML+= `
<div class="swiper-pagination-item ${i == 0 ? 'active' : ''}"></div>
`
};
this.bindPaginationClick();
}
}
bindPaginationClick() {
var itemAll = this._(".swiper-pagination-item")
itemAll.forEach((v,i)=> {
v.onclick = () => {
this.BindNext();
this.BindPrev();
this.changePagination(i)
}
})
}
changePagination(i) {
this.config.on.hasOwnProperty("slideChange") ? this.config.on?.slideChange(i) : ''
var pagination = this._(".swiper-pagination-item")
if (pagination.length != 0) {
pagination.forEach(item => item.classList.remove("active"))
pagination[i].classList.add("active")
this.SetTranslateX(i * -this.config.width())
}
}
slideTo(index) {
this.SetTranslateX(index * -this.config.width())
this.changePagination(index)
}
AutoPlay() {
this.config.timer = setInterval(() => {
if (this.config.loop) {
this.$(this.config.navigation.nextEl).onclick()
} else {
if (this.translateX() / -this.config.width() >= this.config.maxLength()-1) {
this.config.fx = false
this.motion(this.config.width())
} else {
if (this.config.fx) {
this.motion(-this.config.width())
} else {
this.motion(this.config.width())
if (this.translateX() / -this.config.width() == 0) {
this.config.fx = true
}
}
}
}
},this.config.autoTime)
}
translateX() {
return Number(this.$(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}
SetTranslateX(distance) {
this.$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
window.Swiper = Swiper
})()

47
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/笔记.txt Normal file
View File

@@ -0,0 +1,47 @@
实现的功能：
自定义参数：
1：loop: false // 循环模式选项
【完成】2：自动播放
autoPlay: true // false 【完成】
autoTime: 3(默认) 用户可以自定义 【完成】
【完成】3：是否需要前进后退按钮
如果需要
1：写上html
2：
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
【完成】4：是否需要小圆点
如果需要
1：写上html
2：
pagination: {
el: '.swiper-pagination',
},
【完成】5：initialSlide: 0(默认) 设置显示第几张图
【完成】6：speed: 300(默认) 设置图片切换的速度
功能（方法）：
1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
new Swiper('.swiper-container',{
on:{
slideChange: function(){
alert('改变了，activeIndex为'+this.activeIndex);
},
},
})
mySwiper.on('slideChange', function () {
//...
});
2：slideTo(index) 传入参数，切换轮播图

113
历届学生/吴欣阳/项目开发/上课项目/js案例/富强.html Normal file
View File

@@ -0,0 +1,113 @@
<!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 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
transition: all ease 1s;
}
</style>
</head>
<body>
</body>
<script>
// 1：为整个body绑定一个点击事件，点击后应该在鼠标点击的地方生成一个文字
// 鼠标点击的地方：获取鼠标点击后的x，y轴距离
// 文字如何出现：依次走数组每一个元素
// 让字产生随机的颜色
// 生成一个标签 span
// 最后把js生成的span放到网页上
// 2：让网页上的元素向上移动，在移动结束后消失
// 让元素移动，修改定位的 top 距离
// 让元素消失，直接从body上删除元素span
var body = document.querySelector("body");
var list = ["富强","民主", "文明", "和谐", "自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
var index = 0;
body.onclick = function (e) {
var X = e.x, Y = e.y;
var span = document.createElement("span");
span.innerText = list[index]
// 随机产生一个色相
var color = parseInt(Math.random() * 360);
span.style = `
position: fixed;
left: ${X}px;
top: ${Y}px;
color: hsl(${color},100%,50%,1);
`
body.appendChild(span)
var direction = [
'LeftTop', 'LeftBottom',
'RightTop', 'RightBottom',
];
var directionIndex = parseInt(Math.random() * direction.length)
motion(direction[directionIndex], span, X, Y)
function motion(direction, el, x, y) {
var newX = Math.random() * x;
var newY = Math.random() * y;
setTimeout(function() {
switch (direction) {
case "LeftTop":
el.style.left = `${x - newX}px`;
el.style.top = `${y - newY}px`;
break;
case "RightTop":
el.style.left = `${x + newX}px`;
el.style.top = `${y - newY}px`;
break;
case "LeftBottom":
el.style.left = `${x - newX}px`;
el.style.top = `${y + newY}px`;
break;
case "RightBottom":
el.style.left = `${x + newX}px`;
el.style.top = `${y + newY}px`;
break;
default:
break;
}
},50)
setTimeout(function() {
body.removeChild(el)
},1050)
}
index+=1;
if (index > 11) {
index = 0;
}
}
</script>
</html>

57
历届学生/吴欣阳/项目开发/上课项目/js案例/广告.html Normal file
View File

@@ -0,0 +1,57 @@
<!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;
}
.ad {
width: 300px;
height: 300px;
position: fixed;
right: 0;
bottom: 0;
background: red;
}
.ad span {
width: 60px;
height: 30px;
background: #000;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
right: 0;
top:0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="ad">
<span>x关闭</span>
</div>
</body>
<script>
var close = document.querySelector(".ad span");
var ad = document.querySelector(".ad");
var count = 0; // 记录用户点击了几次
close.onclick = function () {
console.log("对氨基");
count+=1;
if (count == 1) {
// location.href = "https://www.baidu.com/"
open("https://www.baidu.com/")
} else {
ad.classList.add("hidden")
}
}
</script>
</html>

63
历届学生/吴欣阳/项目开发/上课项目/js案例/搜索建议.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>搜素建议</title>
<style>
body {
margin: 0;
padding: 0;
}
ul li span {
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键词">
<ul>
</ul>
</body>
<script>
var keyword = document.querySelector("input");
var list = ['html学习', '不想学习', '想吃饭', '我没吃饱', '不写代码', '我的学习代码没写完，懒得学习'];
var ul = document.querySelector("ul");
var NewsList = []
// 1: 实现搜索列表的展示
// 获取用户在输入框中输入的数值
// 拿到数值和数组中每条数据进行判断，符合条件单独保存起来
// 2：给关键字加红色
// 想
keyword.oninput = function () {
NewsList = [];
if (keyword.value.length != 0) {
list.forEach(function (v) {
if (v.includes(keyword.value)) {
v = v.replaceAll(keyword.value, `<span>${keyword.value}</span>`)
NewsList.push(v)
}
});
ul.innerHTML = ""
NewsList.forEach(function(v) {
ul.innerHTML += `<li>${v}</li>`
})
console.log(NewsList);
} else {
ul.innerHTML = ""
}
}
</script>
</html>

341
历届学生/吴欣阳/项目开发/上课项目/js案例/滚动固定.html Normal file
View File

@@ -0,0 +1,341 @@
<!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>
.header {
width: 100%;
height: 60px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
<ul>
<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>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
<li>270</li>
<li>271</li>
<li>272</li>
<li>273</li>
<li>274</li>
<li>275</li>
<li>276</li>
<li>277</li>
<li>278</li>
<li>279</li>
<li>280</li>
<li>281</li>
<li>282</li>
<li>283</li>
<li>284</li>
<li>285</li>
<li>286</li>
<li>287</li>
<li>288</li>
<li>289</li>
<li>290</li>
<li>291</li>
<li>292</li>
<li>293</li>
<li>294</li>
<li>295</li>
<li>296</li>
<li>297</li>
<li>298</li>
<li>299</li>
<li>300</li>
</ul>
</body>
<script>
var header = document.querySelector(".header");
window.onscroll = function (e) {
var y = document.querySelector("html").scrollTop;
if (y > 300) {
// header.className += " fixed"
header.classList.add("fixed")
} else {
header.classList.remove("fixed")
}
}
</script>
</html>