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

150
历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/loading.js Normal file
View File

@@ -0,0 +1,150 @@
/**
* 封装加载提示
*/
class Loading {
/**
* 加载进度
*/
loading() {
this.SetLoading()
// 塞入loading的html
this.$(".isShow .loading").innerHTML =
`
<div class="back">
<div class="load8">
<div class="load8-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="load8-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="load8-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
`;
this.$(".isShow .back").style = `padding: 0.4rem;`
this.show()
}
/**
* 显示toast提示
* @param {*} text 文字
* @param {*} time 自动关闭提示的时间 默认3秒
*/
toast(text, time = 3000) {
this.SetLoading()
this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
// 设置边距
this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
// 设置内容
this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
this.show()
setTimeout(()=> this.close(),time)
}
/**
* 弹出框 dialog
* @param {*} params
*/
dialog(params) {
params == undefined ? params = {} : null;
let defaultParams = { title: '标题', message: '内容',
cancelText: '取消', confirmText: '确定',
cancelColor: '#323233', confirmColor: '#fb7299'
};
defaultParams.title = params.title || defaultParams.title;
defaultParams.message = params.message || defaultParams.message;
defaultParams.cancelText = params.cancelText || defaultParams.cancelText;
defaultParams.confirmText = params.confirmText || defaultParams.confirmText;
defaultParams.cancelColor = params.cancelColor || defaultParams.cancelColor;
defaultParams.confirmColor = params.confirmColor || defaultParams.confirmColor;
this.SetLoading()
this.$(".isShow .loading").innerHTML = `
<div class="dialog_f">
<div class="dialog_header">${defaultParams.title}</div>
<div class="dialog_content">
<div class="dialog_message">${defaultParams.message}</div>
</div>
<div class="dialog_footer">
<div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
${defaultParams.cancelText}
</div>
<div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
${defaultParams.confirmText}
</div>
</div>
</div>
`;
// 取消按钮被点击的时候
this.$(".isShow .dialog_cancel").onclick = () => {
params.cancel && params.cancel()
this.close()
}
// 确定按钮被点击的时候
this.$(".isShow .dialog_confirm").onclick = () => {
params.confirm && params.confirm()
this.close()
}
this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
this.show()
}
/**
* 填充loading的html结构
*/
SetLoading () {
if (this.$(".isShow") == null) {
var isShow = document.createElement("div")
isShow.className = "isShow"
isShow.style = "display: none;"
var loading = document.createElement("div")
loading.className = "loading";
isShow.appendChild(loading)
this.$("body").appendChild(isShow)
}
}
/**
* 删除内容，隐藏弹窗
*/
close() {
this.clearContent()
this.$(".isShow").style.display = "none"
}
/**
* 显示弹窗
*/
show() {
this.$(".isShow").style.display = "block"
}
/**
* 清空弹窗内部的内容
*/
clearContent() {
this.$(".isShow .loading").style = "";
this.$(".isShow .loading").innerHTML = "";
}
$(className) {
return document.querySelector(className);
}
}
var Tips = new Loading()

267
历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/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)
}
}

11
历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/rem.js Normal file
View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

330
历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/swiper.js Normal file
View File

@@ -0,0 +1,330 @@
(function () {
/**
* 构造函数
* @param {*} ParentElement 父节点的选择器名称
* @param {*} Configuration 插件的自定义设置项
*/
function Swiper(ParentElement, Configuration) {
// 默认参数
// slideChangeTransitionStart【完成】
// slideTo【完成】
this.defaultConf = {
reverse: false,
timer: '', // 保存自动播放的定时器
ParentElement: '.swiper-container',
wrapper: '.swiper-wrapper',
slide: '.swiper-slide',
config: {
loop: false, // 是否开启循环播放【完成】
time: 1, // 自动播放的间隔事件【完成】
speed: 300, // 切换轮播图时候用的时间【完成】
grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
initialSlide: 0, // 默认显示第一个【完成】
auto: false, // 是否开启自动播放【完成】
},
// 小圆点的父标签选择器名称
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next', // 下一页
prevEl: '.swiper-button-prev', // 上一页
},
}
this.defaultConf.ParentElement = ParentElement || this.defaultConf.ParentElement;
this.defaultConf.config.loop = Configuration.loop || this.defaultConf.config.loop;
this.defaultConf.config.time = Configuration.time || this.defaultConf.config.time;
this.defaultConf.config.speed = Configuration.speed || this.defaultConf.config.speed;
this.defaultConf.config.grabCursor = Configuration.grabCursor || this.defaultConf.config.grabCursor;
this.defaultConf.config.initialSlide = Configuration.initialSlide || this.defaultConf.config.initialSlide;
this.defaultConf.config.auto = Configuration.auto || this.defaultConf.config.auto;
this.defaultConf.wrapper = Configuration.wrapper || this.defaultConf.wrapper;
this.defaultConf.slide = Configuration.slide || this.defaultConf.slide;
this.slideArr = this._(`${this.defaultConf.wrapper} ${this.defaultConf.slide}`);
// 最外层 swiper-container 宽度
this.f = this.$(this.defaultConf.ParentElement).offsetWidth;
// 判断小圆点
if (Configuration.hasOwnProperty("pagination")) {
this.defaultConf.pagination.el = Configuration.pagination.el;
this.RenderDot()
}
// 判断使用自定义前进后退按钮
if (Configuration.hasOwnProperty("navigation")) {
this.RenderNavigation()
//判断下一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("nextEl")) {
this.defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
}
//判断上一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("prevEl")) {
this.defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
}
}
this.UserConfig = Configuration
this.init()
}
// 类的方法
Swiper.prototype = {
init: function () {
this.SetWrapperWidth();
this.defaultConf.config.auto ? this.AutoPlay() : '';
this.initSwiperSlide()
},
// 设置swiper-slide父类的宽度
SetWrapperWidth: function () {
// 计算swiper-slide的宽度
this.slideArr.forEach(v => v.style.width = `${this.f}px`)
this.$(this.defaultConf.wrapper).style = `
width: ${this.f * this.slideArr.length}px;
left: -${this.f * this.defaultConf.config.initialSlide}px;
transition: all ease ${this.defaultConf.config.speed / 1000}s;
cursor: ${this.defaultConf.config.grabCursor ? 'pointer' : ''} ;
`
},
/**
* 注册移动端滑动
*/
initSwiperSlide: function () {
var fa = this.$(this.defaultConf.ParentElement),
startX = 0,
startY = 0;
fa.addEventListener('touchstart', function (e) {
e.stopPropagation()
startX = e.targetTouches[0].pageX
startY = e.targetTouches[0].pageY
})
var getDirection = function (startx, starty, endx, endy) {
// 获得角度
var getAngle = function(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
// 如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
fa.addEventListener('touchmove', (e) => {
e.stopPropagation()
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var direction = getDirection(startX, startY, endX, endY);
if (direction == 3 || direction == 4) {
var x = parseInt(endX - startX) - 40
this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
}
});
fa.addEventListener('touchend', (e) => {
e.stopPropagation()
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var direction = getDirection(startX, startY, endX, endY);
switch (direction) {
case 0:
console.log("未滑动！");
break;
case 1:
console.log("向上！")
break;
case 2:
console.log("向下！")
break;
case 3:
this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
this.animation(-this.f)
this.CallMethods()
this.UserConfig.pagination && this.ChangeDotActive()
console.log("向左！")
break;
case 4:
this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
this.animation(this.f)
this.CallMethods()
this.UserConfig.pagination && this.ChangeDotActive()
console.log("向右滑动");
break;
default:
}
})
},
CallMethods() {
if (this.UserConfig.hasOwnProperty("on")) {
var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
index = TotalLeft / this.f;
// 实现调用用户传入的方法，返回下标给用户
this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
}
},
// 生成小圆点
RenderDot: function () {
this.slideArr.forEach((v, i) => {
this.$(this.defaultConf.pagination.el).innerHTML +=
`
<div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
`
});
var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
Dot.forEach((v, i) => {
v.onclick = () => {
this.UserConfig.pagination && this.ChangeDotActive(i)
this.$(this.defaultConf.wrapper).style.left = `-${i * this.f}px`;
}
})
},
// 渲染左右前进后退按钮
RenderNavigation: function () {
var prev = this.$(this.defaultConf.navigation.prevEl);
var next = this.$(this.defaultConf.navigation.nextEl);
prev.innerText = "<";
next.innerText = ">";
this.BindNavigationClick(prev, next)
},
// 为上一页下一页按钮绑定切换事件
BindNavigationClick() {
// var a = this
// 下一页
this.$(this.defaultConf.navigation.nextEl).onclick = () => {
this.animation(-this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
// 上一页
this.$(this.defaultConf.navigation.prevEl).onclick = () => {
this.animation(this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
},
// 切换动画
animation(offset) {
var swiperWrapper = this.$(this.defaultConf.wrapper);
var y = parseInt(swiperWrapper.style.left) + offset,
max = -(this.f * (this.slideArr.length - 1));
// 如果时最后一张图
if (y < max) {
if (this.defaultConf.config.loop) {
swiperWrapper.style.left = "0px";
} else if (this.defaultConf.config.auto) {
this.defaultConf.reverse = true
this.animation(this.f)
}
return;
// 判断是不是第一张图
} else if (y > 0) {
if (this.defaultConf.config.loop == false && this.defaultConf.config.auto) {
this.defaultConf.reverse = false
swiperWrapper.style.left = `${y - this.f * 2}px`
}
if (this.defaultConf.config.loop) {
swiperWrapper.style.left = `${max}px`
}
return
} else {
if (this.defaultConf.config.loop == false
&& this.defaultConf.config.auto
&& this.defaultConf.reverse) {
swiperWrapper.style.left = `${y}px`
} else {
swiperWrapper.style.left = `${y}px`
}
}
},
ChangeDotActive(type = null) {
var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
var index = "";
if (type == null) {
var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
index = TotalLeft / this.f;
} else {
index = type;
}
// 实现调用用户传入的方法，返回下标给用户
this.CallMethods()
// 清除所有的激活样式
Dot.forEach(val => val.className = "swiper-dot");
// 为你点击的li加激活样式
Dot[index].className = "swiper-dot swiper-active";
},
AutoPlay() {
this.defaultConf.timer = setInterval(() => {
if (this.defaultConf.config.loop == false
&& this.defaultConf.config.auto
&& this.defaultConf.reverse) {
this.animation(this.f)
} else {
this.animation(-this.f)
}
this.UserConfig.pagination && this.ChangeDotActive()
}, this.defaultConf.config.time * 1000)
this.$(this.defaultConf.ParentElement).onmouseover = function () {
clearInterval(this.defaultConf.timer)
}
this.$(this.defaultConf.ParentElement).onmouseout = () => {
this.AutoPlay()
}
},
// 通过js调用此方法，实现轮播图的切换
slideTo(index) {
this.$(this.defaultConf.wrapper).style.left = `-${index * this.f}px`;
this.UserConfig.pagination && this.ChangeDotActive()
},
$: function (className) {
return document.querySelector(className)
},
_: function (className) {
return document.querySelectorAll(className)
}
}
window.swiper = Swiper
})()