分享好物

最新推荐文章于 2024-05-21 10:23:42 发布

马奇德德

最新推荐文章于 2024-05-21 10:23:42 发布

阅读量74

点赞数

分类专栏：周记生活文章标签： java 开发语言前端 javascript

本文链接：https://blog.csdn.net/www340300/article/details/131151286

版权

周记生活专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.前端轻量级视频插件-zyMedia👍

GitHub - ireaderlab/zyMedia: zyMedia是掌阅科技开源的一款基于HTML5的、轻量级的、实现移动端全平台统一UI的多媒体播放器，该播放器已经在千万级设备上适配使用

2.轮播图插件swipper🎆

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

3.富文本编辑器wangEdictor💕

wangEditor

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;
}

好啦，分享就先到这里，如果屏幕前的你有什么好东西，欢迎在评论区一起分享喔~~

一起学习和进步✨🎉🎊🎃