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

55
历届学生/韩一伟/项目开发/上课项目/ajax案例/ajax.js Normal file
View File

@@ -0,0 +1,55 @@
class Ajax {
// 请求方式 不一样
// 请求地址 不一样
// 请求参数 不一样
constructor() {
this.ajax = new XMLHttpRequest()
}
// { url: '请求地址', data: {} //请求参数 }
get (params) {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", params.url + str);
this.ajax.send();
this.statechange(params)
}
post () {
this.open("POST", "http://127.0.0.1/index.php")
}
statechange (params) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
switch (data.status) {
case 200:
params.success(data.result)
break;
case 404:
alert(data.msg)
throw new Error(data.msg)
break;
}
//
} else {
params.error(this.ajax)
}
}
}
}
}
var ajax = new Ajax()

48
历届学生/韩一伟/项目开发/上课项目/ajax案例/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>Document</title>
</head>
<body>
<h2>最新推荐</h2>
<ul></ul>
</body>
<script src="./ajax.js"></script>
<script>
function getIndex() {
ajax.get({
url: 'http://127.0.0.1:3000/api/json/index',
data: {},
success: (res) => {
console.log(res);
render(res)
},
error: (err) => {
console.log("请求出错：", err);
}
});
}
function render(result) {
result.recommended.data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="">
<p>${v.title}</p>
</a>
</li>
`
});
}
getIndex()
</script>
</html>

83
历届学生/韩一伟/项目开发/上课项目/ajax案例/info.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./preview.css">
</head>
<body>
<ul>
</ul>
<button class="dddd">下一页</button>
</body>
<script src="./ajax.js"></script>
<script src="./preview.js"></script>
<script>
var page = 1;
var newImg = []
function getInfo() {
ajax.get({
url: 'http://127.0.0.1:3000/api/json/info',
data: {
page: page,
id: GetQueryString("id")
},
success: (res) => {
render(res);
},
error: (err) => {
console.log("请求出错：", err);
}
});
}
function render(result) {
result.data.forEach(v => {
newImg.push(v.src)
document.querySelector("ul").innerHTML += `
<li>
<img src="${v.src}" width="300" alt="">
</li>
`
});
var imgArr = document.querySelectorAll("ul li img");
imgArr.forEach((v,i) => {
v.onclick = () => {
new preview({
index: i,
data: newImg
})
}
})
}
document.querySelector(".dddd").onclick = function () {
page+=1;
getInfo()
}
getInfo()
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</html>

149
历届学生/韩一伟/项目开发/上课项目/ajax案例/preview.css Normal file
View File

@@ -0,0 +1,149 @@
@font-face {
font-family: "iconfont"; /* Project id 2576965 */
src: url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.woff2?t=1626173792950') format('woff2'),
url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.woff?t=1626173792950') format('woff'),
url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.ttf?t=1626173792950') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-closedx:before {
content: "\e684";
}
.icon-suoxiao1:before {
content: "\e611";
}
.icon-zuo:before {
content: "\e604";
}
.icon-fangda:before {
content: "\e605";
}
.icon-fullscreen:before {
content: "\e623";
}
.icon-shuaxin:before {
content: "\e627";
}
.icon-suoxiao:before {
content: "\e610";
}
.icon-play:before {
content: "\e664";
}
.icon-zhankai-copy:before {
content: "\e62a";
}
.icon-zhankai:before {
content: "\e601";
}
.icon-gouwuchekong:before {
content: "\e600";
}
.icon-chakan:before {
content: "\e618";
}
.icon-pinglun:before {
content: "\e629";
}
.icon-shangchuan:before {
content: "\e612";
}
.icon-sousuo:before {
content: "\e60d";
}
.preview {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.preview .preview_black{
width: 100%;
height: 100%;
background: #0000008c;
position: absolute;
}
.preview .preview_main{
position: relative;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.preview_main .show {
height: 100%;
}
.preview_main .closed {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
z-index: 99;
}
.preview_main .preview_page i {
font-size: 30px;
font-weight: bolder;
}
.preview_main .preview_page {
color: #fff;
z-index: 99;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
}
.preview_action {
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
border-color: #fff;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-around;
color: #fff;
}
.preview_action i {
font-size: 18px;
}
.leftx {
transform: rotateY(180deg);
}

195
历届学生/韩一伟/项目开发/上课项目/ajax案例/preview.js Normal file
View File

@@ -0,0 +1,195 @@
(function () {
body = $("body")
class Preview {
x1;
y1;
l;
t;
isRun = false;
constructor(option) {
if (! option.hasOwnProperty("index")) {
throw new Error("抱歉，index参数必传")
}
if ( option.hasOwnProperty("data") == false || Array.isArray(option.data) == false) {
throw new Error("抱歉，data参数必传，且必须为数组")
}
this.defaultOption = option
console.log(this.defaultOption);
this.createdHtml()
this.bindEvent()
this.MouseEvent()
}
createdHtml() {
body.insertAdjacentHTML("beforeend",`
<div class="preview">
<div class="preview_black"></div>
<div class="preview_main">
<img style="transform: scale(1) rotate(0deg);margin-left:0" class="show" src="${this.defaultOption.data[this.defaultOption.index]}" alt="">
<i class="iconfont icon-closedx closed"></i>
<div class="preview_page">
<i class="iconfont icon-zuo prev"></i>
<i class="iconfont icon-zhankai-copy next"></i>
</div>
<div class="preview_action">
<i class="iconfont icon-suoxiao"></i>
<i class="iconfont icon-fangda"></i>
<i class="iconfont icon-fullscreen isfullscreen"></i>
<i class="iconfont icon-shuaxin leftx"></i>
<i class="iconfont icon-shuaxin rightx"></i>
</div>
</div>
</div>
`)
}
bindEvent() {
// 关闭按钮被点击
$(".closed").onclick = () => {
body.removeChild($(".preview"))
}
// 解决 this 指向
// 外部提前保存this
// 箭头函数 => es6
// 下一页点击事件
$(".next").onclick = () => {
this.defaultOption.index += 1
if (this.defaultOption.index > this.defaultOption.data.length - 1) {
this.defaultOption.index = 0
}
this.changeImgSrc()
}
// 上一页点击事件
$(".prev").onclick = () => {
this.defaultOption.index -= 1
if (this.defaultOption.index < 0) {
this.defaultOption.index = this.defaultOption.data.length - 1
}
this.changeImgSrc()
}
// 放大
$(".icon-fangda").onclick = () => {
$(".show").style.transform = `scale(${this.scale() + 0.2}) rotate(${this.rotate()}deg)`
}
// 缩小
$(".icon-suoxiao").onclick = () => {
$(".show").style.transform = `scale(${this.scale() - 0.2 <= 0.2 ? 0.2 : this.scale() - 0.2}) rotate(${this.rotate()}deg)`
}
// 左旋转
$(".leftx").onclick = () => {
$(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()-90}deg)`
}
// 右旋转
$(".rightx").onclick = () => {
$(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()+90}deg)`
}
$(".isfullscreen").onclick = () => {
if ($(".isfullscreen").classList.contains("icon-fullscreen")) {
$(".show").style.transform = `scale(2) rotate(${this.rotate()}deg)`
$(".isfullscreen").classList.remove("icon-fullscreen")
$(".isfullscreen").classList.add("icon-suoxiao1")
} else {
$(".show").style.transform = `scale(1) rotate(${this.rotate()}deg)`
$(".isfullscreen").classList.add("icon-fullscreen")
$(".isfullscreen").classList.remove("icon-suoxiao1")
}
}
}
MouseEvent() {
$(".show").onmousedown = (e) => {
this.isRun = true;
console.log("你按下了 this.isRun ：", this.isRun)
e.preventDefault()
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt($(".show").style.marginLeft);
console.log(this.l)
this.t = $(".show").offsetTop;
this.ImgMove(".show")
}
// 离开图片的时候，把事件交给 preview
$(".show").onmouseout = (e) => {
console.log("离开图片的时候，把事件交给 preview: ", this.isRun)
if (this.isRun) {
this.ImgMove(".preview")
}
}
// 鼠标在背景上松开的时候
$(".preview").onmouseup = (e) => {
this.isRun = false
$(".show").onmousemove = null
$(".preview").onmousemove = null
}
// 鼠标在图片上松开的时候
$(".show").onmouseup = (e) => {
e.stopPropagation()
this.isRun = false
$(".show").onmousemove = null
}
}
ImgMove(className) {
$(className).onmousemove = (e) => {
e.preventDefault()
var x2 = e.x,
y2 = e.y;
var x3 = x2 - this.x1,
y3 = y2 - this.y1;
//更改元素的left，top值
$(".show").style.marginLeft = `${x3 + this.l}px`;
$(".show").style.marginTop = `${y3 + this.t}px`;
}
}
changeImgSrc() {
console.log(this.defaultOption.index)
$(".show").src = this.defaultOption.data[this.defaultOption.index]
}
scale() {
return Number($(".show").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
rotate() {
return Number($(".show").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
}
function $(className) {
return document.querySelector(className)
}
window.preview = Preview
})()