1.前端轻量级视频插件-zyMedia👍
GitHub - ireaderlab/zyMedia: zyMedia是掌阅科技开源的一款基于HTML5的、轻量级的、实现移动端全平台统一UI的多媒体播放器,该播放器已经在千万级设备上适配使用
2.轮播图插件swipper🎆
3.富文本编辑器wangEdictor💕
4.常用的js操作
(1)封装发送ajax请求
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
//处理结束
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
//判断成功
if (xhr.status >= 200 && xhr.status) {
resolve(xhr.response);
} else {
reject(xhr.status);
}
}
}
})
}
sendAJAX('http://118.195.129.130:3000/food/allpage')
//对结果进行处理
.then(value => {//成功走第一个
console.log(value);
}, reason => {//失败走第二个
console.log(reason);
})
(2)创建一个一定范围内的随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
console.log(11);
(3)缓动动画
// 简单动画封装函数
// obj目标对象
// target目标位置
//匀速动画就是盒子当前的位置+固定的值10
//缓动动画就是 盒子当前的位置+变化的值(目标值- 现在的位置)/10
function animate(obj, target, callback) {
//相当于给对象添加了个定时器的属性,就能够做到给不同的元素指定了不同的定时器
//为了防止有多个定时器,解决方案就是让元素只有一个定时器来执行,将上一个定时器给清除
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长值写到定时器里面
//把步长值改为整数,不要出现小数的问题
var step = Math.ceil(target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft >= target) {
//停止动画,本质上是定时器
clearInterval(obj.timer);
//回调函数写在定时器里面
if (callback) {
callback();//调用函数
}
}
//把每次加1这个步长值改成一个慢慢变小的值,步长公式:(目标值- 现在的位置)/10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
(4)封装模态框
<!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="delete">删除</button>
<button id="login">登录</button>
<button id="add">新增</button>
<!-- 分析需求
1.多个模态框一样的,而且每次点击都会出现一个,怎么做呢?
2.构造函数,把模态框封装成一个构造函数,每次new 都会产出一个模态
框,所以点击不同的按钮,就是在将new模态框实例化
模态框的功能:
打开功能(显示) ,关闭功能,而且每个模态框都包含这两个功能 -->
<!-- <div class="modal">
<div class="header">温馨提示<i></i></div>
<div class="body">您没有权限操作</div>
</div> -->
<script>
//面向对象的最大特点是可复用性
//由于是构造方法,里面的属性和方法,都得需要this指向所创建得对象
function Modal(title = '', message = '') {
console.log(title, message);
//创建modal模态框盒子
//1,1创建indiv标签
this.modalBox = document.createElement('div');//创建元素标签
//1.2 给div标签添加类名未modal
this.modalBox.className = 'modal'
//1.3 modal盒子内部填充2个div 标签并且修改文字内容
this.modalBox.innerHTML = `
<div class="header">${title}<i>X</i></div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
//调用构造函数
// new Modal('温馨提示', '你没有权限删除操作')
// new Modal('友情提示', '您还没有登录呢!')
Modal.prototype.open = function () {
//首先来判断页面当中是否有Modal盒子,如果有先删除,否则,继续添加
const box = document.querySelector('.modal');
box && box.remove()//也就是,前面是假则中断 ,逻辑与移除
//注意这个方法不要使用箭头函数,把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox);
//要等着盒子显示出来,就可以点击确定事件了
this.modalBox.querySelector('i').addEventListener('click', () => {
//这个需要用到箭头函数,这个this指向实例对象,
//也就是当前函数是没有this的,只有上一级函数才有this
this.close()
})
//从当前盒子当中选择i
}
//给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
}
//测试一下,点击删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用modal构造函数
const del = new Modal('温馨的提示', '你没有权限删除操作')
//实例对象调用open方法
del.open();
})
//测试一下,点击登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用modal构造函数
const del = new Modal('友情的提示', '您还没有登录呢!');
//实例对象调用open方法
del.open();
})
document.querySelector('#add').addEventListener('click', () => {
//先调用modal构造函数
const del = new Modal('强烈的提示', '您没有新增权限!');
//实例对象调用open方法
del.open();
})
</script>
</body>
</html>
具体样式还需要自己写滴
5.封装一个css消除html一些自带的样式
/* 把所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/* css3鐩掑瓙妯″瀷 */
box-sizing: border-box;
}
/* em和i斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/*去掉li的小圆点*/
li {
list-style: none;
}
img {
/*border 0照顾低版本的浏览器,如果,图片外面包含了链接就会有边框问题*/
border: 0;
/*取消图片底侧有空白缝隙问题*/
vertical-align: middle;
}
button {
/*当鼠标经过按钮button的时候,鼠标会变成小*/
cursor: pointer;
}
a {
color: #666;
}
a:hover {
color: #c81623;
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 默认有灰色边框我们需要手动去掉 */
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
a {
text-decoration: none;
}
好啦,分享就先到这里,如果屏幕前的你有什么好东西,欢迎在评论区一起分享喔~~
一起学习和进步✨🎉🎊🎃