利用es6和es5的继承方式写一个简单的弹窗

最新推荐文章于 2023-03-30 01:08:04 发布
最新推荐文章于 2023-03-30 01:08:04 发布
阅读量275 收藏
点赞数
文章标签： es5 es6 弹窗
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42750608/article/details/91410236
版权

本片博文受到https://blog.csdn.net/zfzhuman123/article/details/90411793的启发,es6部分代码只改了一点点,逻辑也是遵照他的思想来的,而且es5继承的部分也是用了部分es6的语法

 

1.首先是index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1117508_wxidm5ry7od.css">
    <style>
        /* message.css */
        /* 这个动画规则我们就叫做message-move-in吧，随后我们会用animation属性在某个元素上应用这个动画规则。 */
        @keyframes message-move-in {
            0% {
                /* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
                /* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
                opacity: 0;
                /* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
                /* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
                transform: translateY(-100%);
            }
            100% {
                opacity: 1;
                /* 平移到自身位置 */
                transform: translateY(0);
            }
        }

        /* message.css */
        @keyframes message-move-out {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-100%);
            }
        }
        
        /* message.css */
        #message-container .message.move-in,  
        #container .message.move-in 
        {
            /* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
            animation: message-move-in 0.3s ease-in-out;
            /*ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。*/
        }

        #message-container .message.move-out, 
        #container .message.move-out 
        {
            animation: message-move-out 0.3s ease-in-out;
            /* 让动画结束后保持结束状态 */
            animation-fill-mode: forwards;
        }


        /* message.css */
        #message-container, 
        #container 
        {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #eee;
        
            /* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #message-container .message, 
        #container .message 
        {
            background: #fff;
            margin: 10px 0;
            padding: 0 10px;
            height: 40px;
            box-shadow: 0 0 10px 0 #eee;
            font-size: 14px;
            border-radius: 3px;
        
            /* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
            display: flex;
            align-items: center;
        }

        /* 给每个图标都加上不同的颜色，用来区分不同类型的消息 */
        .message .icon-info {
            color: #0482f8;
        }
        .message .icon-error {
            color: #f83504;
        }
        .message .icon-success {
            color: #06a35a;
        }
        .message .icon-warning {
            color: #ceca07;
        }
        .message .icon-loading {
            color: #0482f8;
        } 
        .btn {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <button class="btn">弹窗消息提醒</button>
</body>
<script src="index.js"></script>
<script>
// message可以定义为全局对象，项目中可以直接调用。
const message = new Message({
    containerId: 'container'

});
document.querySelector('.btn').addEventListener('click', () => {
    message.show({
        type: 'error',
        text: '点我旁边的叉叉试试',
        duration: 1000,    // 不会自动消失
        closeable: true, // 可手动关闭
    });
});
</script>
</html>

2.es6部分

class Message {
    //构造函数会在实例化的时候自动执行
    constructor(opts={}) {
        const containerId = opts.containerId || 'message-container';
        // 检测下html中是否已经有这个message-container元素
        this.containerEl = document.getElementById(containerId);
        //没有就创建一个
        if (!this.containerEl) {
            // 创建一个Element对象，也就是创建一个id为message-container的dom节点
            this.containerEl = document.createElement('div');
            this.containerEl.id = containerId;
            // 把message-container元素放在html的body末尾
            document.body.appendChild(this.containerEl);
        }
    }
    
    show({ type = 'success', text = '', duration = 2000, closeable = false }) {
        // 创建一个Element对象
        let messageEl = document.createElement('div');
        // 设置消息class，这里加上move-in可以直接看到弹出效果
        messageEl.className = 'message move-in';
        // 消息内部html字符串
        messageEl.innerHTML = `
            <span class="icon icon-${type}"></span>
            <div class="text">${text}</div>
        `;
        //点击弹窗提醒按钮,不能多次出现弹窗
        if(document.getElementsByClassName(messageEl.className).length>0) {
            alert('弹窗已存在');
            return;
        }
 
        // 是否展示关闭按钮
        if (closeable) {
            // 创建一个关闭按钮
            let closeEl = document.createElement('div');
            closeEl.className = 'close icon icon-close';
            // 把关闭按钮追加到message元素末尾
            messageEl.appendChild(closeEl);
 
            // 监听关闭按钮的click事件，触发后将调用我们的close方法
            // 我们把刚才写的移除消息封装为一个close方法
            closeEl.addEventListener('click', (e) => {
                this.close(messageEl)
            });
        }
 
        // 追加到message-container末尾
        // this.containerEl属性是我们在构造函数中创建的message-container容器
        this.containerEl.appendChild(messageEl);
 
        // 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示
        if (duration > 0) {
            // 用setTimeout来做一个定时器
            setTimeout(() => {
                //this.close(messageEl);
            }, duration);
        }   
    }

    /**
     * 关闭某个消息
     * 由于定时器里边要移除消息，然后用户手动关闭事件也要移除消息，所以我们直接把移除消息提取出来封装成一个方法
     * @param {Element} messageEl 
     */
    close(messageEl) {
        // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
        messageEl.className = messageEl.className.replace('move-in', '');
        // 增加一个move-out类
        messageEl.className += 'move-out';
 
        // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
        // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
        messageEl.addEventListener('animationend', () => {
            // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
            messageEl.remove();
        });
    }
}

3.es5方法

function Message(opts) {
    var defaultOpts = {containerId: opts.containerId||'message-container'};
    const containerId = defaultOpts.containerId;
    // 检测下html中是否已经有这个message-container元素
    this.containerEl = document.getElementById(containerId);
    //没有就创建一个
    if (!this.containerEl) {
        // 创建一个Element对象，也就是创建一个id为message-container的dom节点
        this.containerEl = document.createElement('div');
        this.containerEl.id = containerId;
        // 把message-container元素放在html的body末尾
        document.body.appendChild(this.containerEl);
    }
}

//弹窗出现
Message.prototype.show = function(opts) {
    //es6的语法--解构赋值
    var defaultOpts = {
        type: opts.type||'success',
        text: opts.text||'点我旁边的叉叉试试',
        duration: opts.duration||2000,    // 不会自动消失
        closeable: opts.closeable||true, // 可手动关闭
    }
    let {type,text,duration,closeable} = defaultOpts;
    // 创建一个Element对象
    let messageEl = document.createElement('div');
    // 设置消息class，这里加上move-in可以直接看到弹出效果
    messageEl.className = 'message move-in';
    // 消息内部html字符串
    messageEl.innerHTML = `
        <span class="icon icon-${type}"></span>
        <div class="text">${text}</div>
    `;
    //点击弹窗提醒按钮,不能多次出现弹窗
    if(document.getElementsByClassName(messageEl.className).length>0) {
        alert('弹窗已存在');
        return;
    }

    // 是否展示关闭按钮
    if (closeable) {
        // 创建一个关闭按钮
        let closeEl = document.createElement('div');
        closeEl.className = 'close icon icon-close';
        // 把关闭按钮追加到message元素末尾
        messageEl.appendChild(closeEl);

        // 监听关闭按钮的click事件，触发后将调用我们的close方法
        // 我们把刚才写的移除消息封装为一个close方法
        closeEl.addEventListener('click', (e) => {
            this.close(messageEl)
        });
    }

    // 追加到message-container末尾
    // this.containerEl属性是我们在构造函数中创建的message-container容器
    this.containerEl.appendChild(messageEl);

    // 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示
    if (duration > 0) {
        // 用setTimeout来做一个定时器
        setTimeout(() => {
            //this.close(messageEl);
        }, duration);
    }   
}

//弹窗消失
Message.prototype.close = function(messageEl) {
    // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
    messageEl.className = messageEl.className.replace('move-in', '');
    // 增加一个move-out类
    messageEl.className += 'move-out';

    // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
    // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
    messageEl.addEventListener('animationend', () => {
        // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
        messageEl.remove();
    });
}

然后各自将es6或者es5这部分js在index.html中使用script标签引入,点击按钮查看效果就行了

qq_42750608
关注
es6转es5在线转换.txt
04-14
es6转es5在线转换地址，和如何利用babel工具将es6语法转换成es5语法 es6有些语法是目前浏览器无法支持的，所以我们需要转换一下
es6 实现dialog组件的封装
dijuan4923的博客
08-26 357
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
开源一个基于es6的dialog控件
weixin_34219944的博客
04-30 139
在项目开发的过程中，团队拥有一个自己的组件库是很必要的。无论是UI组件还是其他的一些功能组件，积累越丰富，更新越活跃，对快速开发的帮助越大。在团队早期的项目开发中，由于前端组成立的较晚，各种积累也是不够，只能慢慢积累。比如本文介绍的easy-dialog,早期的dialog组件也是每开发一个项目就各种面向搜索引擎编程，为了实现ui的效果，各种第三方的组件库也是用的心很累，于是组件开发开始走自力更生...
ES6小点心之通用弹窗
weixin_34247032的博客
01-12 237
小点心，顾名思义，开箱即食，拿来即用。 前端业务逻辑主要分为【交互效果】和【数据展示】两方面。数据展示可使用 MVVM 框架来实现。前端的交互效果常用的也就那么几种，比如弹窗，楼层定位，倒计时，下拉刷新，上拉加载更多等等。这些交互效果完全可以提出来做成通用的模块，以后不必再劳心费神去想怎么实现。就像 Swiper 封装了一个类来专门做轮播图一样，本系列的目的是通过封装一系列类来实现弹窗，楼层定位...
ES6当点击按钮时弹出一个对话框
BubbleABC的博客
11-28 715
经典案例 <body> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <script> //循环完毕，赋予全局一个i=3 //需求：当点击按钮时，显示自己的value值 let btns = document.q
DAY27-ES6基础
最新发布
qq_42775808的博客
03-30 165
跟spStr1的结果是一致的，值也是["I", " ", "a", "m", " ", "t", "h", "e", " ", "b", "o", "n", "e", " ", "o", "f", " ", "m", "y", " ", "s", "w", "o", "r", "d"]。如果`age`属性的值为`undefined`，则将`age`默认设为`24`。最终的结果是变量`name`的值为`'小红'`，变量`age`的值为`24`，变量`hobby`的值为`[ '学习' ]`。
利用babel将es6语法转es5的简单示例
11-30
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。 本文讲解需预装node和npm。大家可以参考这篇文章：//...
ES6转ES5实例工程
01-08
描述中提到“在这个WebStorm工程中，ES6会自动转为ES5代码”，暗示了WebStorm IDE的一个功能，即它可以配置来自动进行代码转换，可能利用了Babel这样的工具。WebStorm是JetBrains公司的一款流行的JavaScript集成开发...
详解vue-cli+es6引入es5写的js(两种方法)
10-17
Vue-cli可以生成一个包含现代JavaScript特性的项目模板，这些特性包括ES6语法，这是当前JavaScript标准的版本，提供了一些比ES5更为强大和方便的语法特性。 ES6（ECMAScript 6），即JavaScript的第六版，于2015年...
vue源码学习笔记2（resolveConstructorOptions）
weixin_33897722的博客
03-13 699
mergeOptions看完以后，回到initMixin来，注意到在mergeOptions函数中的parent参数是一个resolveConstructorOptions函数的返回值， vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, ...
浅谈JavaScript显示弹出窗口的两种方案
筱葭的博客
10-26 2585
1、方案一：（谷歌浏览器不支持） a)建立模式对话框显示指定的文档 var dialog=window.showModalDialog(url, arguments,features)   url：必选参数，用来指定对话框要显示的文档的url； arguments：可选参数，用来向对话框传递参数，传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传
前端弹出框组件
java_goodstudy的博客
12-17 3736
下面分享一个js 弹出窗, 分 toast , dialog , load 三种弹窗 , 下面用js css 来实现以下：首先是js代码 | 采用了 es6 的写法 //公共弹窗加载动画const DIALOG_TOAST = '1', DIALOG_DIALOG = '2', DIALOG_LOAD = '3',class Dialog { const
js弹出框、对话框、提示框、弹窗总结
热门推荐
anhuidelinger的专栏
11-29 44万+
js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 ========================          //弹出对话框并输出一段提示信息       funct
原生js开发的弹框组件
诸葛苍穹
01-27 1420
<!doctype html> <html lang="en" ng-app = 'myApp' > <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0;} input { width:60px; height: 30px;} .log
弹窗页面
zengyonglan的博客
09-21 797
html<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
【2021.07】前端实现的三种基本设计模式
指尖笑
07-29 429
前言 前段时间找工作，在一次笔试过程中碰到过手写实现发布订阅者模式，后来回来总结了这三种设计模式的前端实现和应用。 提示：如有不对，请多多指教 文章目录前言一、单例模式二、策略模式三、发布订阅者模式总结 一、单例模式 定义：1 、只有一个实例 2 、可以全局的访问 主要解决：一个全局使用的类 频繁的创建和销毁 何时使用：想控制实例的数量 节省系统化资源的时候 如何实现：判断系统是否已经有这个单例 如果有则返回 没有就创建 单例模式优点：内存中只有一个实例 ，减少内存的开销，尤其是频繁的创建和销毁实例
浅谈利用遮罩实现点击某区域以外时弹窗的弹出与关闭
筱葭的博客
03-14 6624
HTML： 点击除开div的区域可以弹出弹窗 点击除开div和弹窗的区域可以关闭弹窗 CSS： #div{ /*设置z-index属性必须设置position:relative或absolute*/ position:relative; /*设置div位于遮罩的上方*/ z-index:2; width:300px; height:200px; border:1px
ES6小点心第二弹——底部浮现弹窗
weixin_34277853的博客
01-17 121
小点心，顾名思义，开箱即食，拿来即用。 献上第二个小点心：SlidePopup。 GitHub 在线演示 GitHub 上欢迎大家来找茬^_^ 前端朋友们，今天要介绍的这款小点心牛B了。相信是个前端都应该接触过这种效果，而且是非常流行的交互。 闲话少叙，先上效果图： 基本使用 多个可自定义的选项 来不及解释了，立即查看示例。 这种弹窗的使用场景主要出现在移动端。 先定一个小目标： 易用...
前端div的弹出，html弹窗思路
wf824284257的博客
07-22 2万+
背景这是笔者实习的第三周，领导交给笔者一个这样的任务：原：页面最下面有个按钮，点击后跳转到指定的页面。 新：点击该按钮后，弹窗，上面带两个单选按钮，然后根据用户的选择跳转到不同的页面。 爱，笔者对前端的东西不太熟悉，最拿手的就是winform了，心想winform做这个简单啊- -，但现在要用html css js 来实现。恰好这几天学了点英语，顺便挂一句：Problems are not stop
ES6与ES5继承的区别及实现原理
这种方式下，子类的`prototype`被设置为父类的一个实例，这样子类的实例就可以访问父类的原型链上的属性和方法。 ```javascript function SuperType() {} function SubType() {} SubType.prototype = new SuperType...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值