当前位置：首页 > Web前端 > HTML

从零开始实现一个消息提示框

时间：2023-04-03 00:08:15 HTML

简介消息提示框在实际应用场景中是比较常见的。最常用的就是elementui的消息提示框。我们通常直接使用它们，但我们过去是否尝试过探索它们？实现原理，自己动手？为了提高我们个人的能力和竞争力，我们可以尝试实现这样一个消息提示框。实现效果下面看一下最终的实现效果，如下图所示：准备工作搭建一个基本的项目结构我们创建一个message文件夹，然后创建一个index.html文件，以及message.js和message。css文件，如下所示：布局消息提示框在html文件中，我们可以先实现一个静态的消息提示框，代码如下：

这是一个提示框

×

然后我们在message.css中编写基本的css代码：*{margin:0;填充：0；框大小：边框框；}/*消息提示框容器样式*/.message{position:fixed;左：50%；转换：translateX(-50%)；显示：弹性；对齐项目：居中；最小宽度：300px；背景色：#edf2fc；边框：1px实心#edf2fc；填充：16px17px；顶部：25px；边界半径：6px；溢出：隐藏；z-index:1000;}/*关闭按钮样式*/.message>.message-close-btn{position:absolute;右：15px；顶部：50%；变换：翻译Y(-50%)；颜色：#c0c??0c4；字体大小：17px；cursor:pointer;}.message>.message-close-btn:hover,.message>.message-close-btn:active{颜色：#909399;}/*消息提示框内容样式*/.messagep{line-height:1;字体大小：14px；color:#909399;}有四个提示框，要让内容居中，我们无非是加个类名来写css样式，比如让内容居中，我们只需要在容器元素上加个类名即可html消息提示框，代码如下：

这是一个提示框

×

然后在css文件中添加如下css代码：/*contentcentered*/.message。message-center{justify-content:center;}这四种提示框无非是同一个原理，加一个类名，然后改变背景色和字体颜色，所以html代码如下：

这是一个成功提示框

×

这是一个警告框

×

这是一个错误提示框

×css代码如下：/*成功提示框样式*/.message。消息-成功{背景颜色：#e1f3d8;border-color:#e1f3d8;}.message.message-successp{color:#67c23a;}/*警告提示框样式*/.message.message-warning{background-color:#fdfce6;border-color:#fdfce6;}.message.message-warningp{color:#e6a23c;}/*错误提示框样式*/.message.message-error{background-color:#fef0f0;border-color:#fef0f0;}.message.message-errorp{color:#f56c6c;}这样，准备工作就完成了，接下来就是我们的重头戏，JavaScript代码，尝试把上面的代码注释掉动态实现提示框的创建定义四种类型的消息提示框我们定义一个对象来表示消息提示框的类型，如下：//四种类型的消息提示框lettypeMap={info:"info",warning:"warning",success:"success",error:"error"}添加默认配置项下面分析一下需要传入的配置项：内容（content）、关闭提示框的时间（closeTime）、是否显示关闭提示框按钮（showClose）、居中内容（center）和消息提示框类型（type）。所以定义配置项如下：//提示框的默认配置项letmessageOption={type:"info",closeTime:600,center:false,showClose:false,content:"defaultcontent"}创建一个消息提示框类我们通过面向对象的编程思想，将消息提示框看成一个类对象，所以我们只需要创建一个类即可。虽然可以使用es6的类语法来创建，但是为了方便，我们还是使用构造函数来实现。创建一个构造函数Message，如下图：functionMessage(option){//这里是一个初始化this.init(option);}初始化创建消息提示框构造函数后，我们需要传入配置项，我们初始化操作是在函数中完成的，接下来我们就来实现初始化操作。Message.prototype.init=function(option){//在这里创建提示框元素，并将整个提示框容器元素添加到页面中document.body.appendChild(this.create(option));//这里设置提示框的顶部this.setTop(document.querySelectorAll('.message'));//判断传入的closeTime是否大于0，提示框默认关闭if(option.closeTime>0){this.close(option.container,option.closeTime);}//点击关闭按钮关闭提示框if(option.close){option.close.onclick=(e)=>{this.close(e.currentTarget.parentElement,0);}}}创建提示框在前面的初始化操作中，我们做了几个函数。首先，创建一个提示框容器元素，将提示框容器元素添加到页面bod中。我们也是动态计算提示框的顶部，判断传入的默认关闭时间关闭提示框，点击关闭按钮关闭提示框。我们来看创建提示框的方法，即create方法的写操作。如下：Message.prototype.create=function(option){//这里进行了判断，也就是说如果showClose设置为false，则不会显示关闭按钮，closeTime也会为0，即有不会有自动关闭提示框，我们会显示关闭按钮if(!option.showClose&&option.closeTime<=0)option.showClose=true;//创建容器元素letelement=document.createElement('div');//设置类名element.className=`messagemessage-${option.type}`;if(option.center)element.classList.add('消息中心');//创建关闭按钮元素并设置类名和内容letcloseBtn=document.createElement('i');closeBtn.className='消息关闭按钮';closeBtn.innerHTML='×';//创建一个内容元素letcontentElement=document.createElement('p');contentElement.innerHTML=option.content;//判断是否显示关闭按钮，将关闭按钮元素添加到提示框容器元素中if(closeBtn&&option.showClose)element.appendChild(closeBtn);//将内容元素添加到提示框容器中element.appendChild(contentElement);//在配置项对象中存放提示框容器元素和关闭按钮元素option.container=element;option.close=closeBtn;//返回提示框容器元素返回元素;}关闭提示框，可以看到我们创建了一个close方法，传入提示框容器元素来关闭一个提示框。接下来我们实现关闭方法如下：Message.prototype。close=function(messageElement,time){//根据传入的时间延迟关闭，其实就是移除元素setTimeout(()=>{//判断提示框容器元素是否传入，有两种types情况下，如果有多个提示框容器元素，循环删除，如果是单个提示框容器元素，直接删除if(messageElement&&messageElement.length){for(leti=0;i

上一篇：前端开发初识

下一篇：HTML5Canvas抽奖应用DEMO

从零开始实现一个消息提示框相关文章

最新推荐

猜你喜欢