由于公司业务需求,要一个公共toast ,下面是自己封装的一个。

css:

.toast {
text-align: center;
min-height: 70px;
width: 220px;
color: #e6e6e6;
border-radius: 4px;
background: rgba(0, 0, 0, 0.7);
position: fixed;
left: 43%;
top: 40%;
} .toast-icon {
padding-top: 10px;
padding-bottom: 10px;
} .toast-tip {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}

js:

/*
* @Author: liguowei
* @Date: 2019-04-08 10:25:42
* @Last Modified by: liguowei01
* @Last Modified time: 2019-04-08 11:17:17
*/
function toast(){};
toast.prototype = {
init:function(){
this.loadCss()
},
iconObj : {
right:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAADIElEQVRYR+2XT0jUQRTH3/e3u0YSYSDuzgwUCOHBS4e6BJmEEfRfiDAI6aAEYkTgsahDNy+BhUQgEgbRoZCoiEpSokuXLh26CAUz4/5YECSIdH++GHFjG9f9o9tq4Bxn5r33+X3fm/d2QZt0YZNy0RZYpZnZUuy/VSwMw71RFF0goqlUKjW5KVJprT3AzG+JaOeystc3HCydTh+Moug1Ee3IpZuZJzYUzFrbvri4+BLA9vwaZObeDQPTWh8loucAtnlQV5RSdzcEzFp7gpmfEVEiD4qJ6LKU8oHbqzmYMaaTiJ4QUTwfCsAlIcTD3F5NwbTWXQDGiChWDKqmillru5l51MtSxMwXlVKP/QZcE8VWgcoS0Xkppau1FQthGKay2ewoM7cCuCqlfFrp+Ch23xjTS0T3PaWyAM4KIV6sZgut9TiA08sXmJl7lFIj1YDTWvcDGPJ8LQDoLAa1VGNaa9dLTuYbA+gTQgyvB85aO8DMg16P+kVEp5RSb0r5hjFmPzNP+d2XiG5IKW+XclDoXGt9C8BND+pnEATHhRDvy/G5VPyF5tWy8R0p5bVyHOXuaK0HAQz4UPF4vCOZTH4s19efV1lgwud8DEsp+8pxqLUeAtDv3f0Ri8WOVQK1oo+FYbhvYWFhAsAu74tHpJQ9ANzYWLGYGdZa9/LcC8xfcwA6hBCfyvmwv+rcN7DWtjKzq4NG7+yREKIbwKIH7aBc4+z29mcTicSRpqamz5VCrVAsr05aAHwoADcuhDgHwDVHYuaYMWYMQJcPFQTBISHEl7VArQrmDrTWDm6SiJKe81dCiDOOy1rrhrEbyvkrA6B9PVBFwdzhzMxMcxRFrpUoT5F3AOYKQKWZ+bBS6utalcrZlZyVxpg97g8CEe0uESwdBMHBVCo1vV6okorlAmQyGTU/P+/gmgsFZWYdi8XaqgVVNpi7mE6nk9lsdhJAiwf3nYjapJTfqqFU2anMD2aMcS3EtZLW5f3purq6tsbGRl1NqIoUywVm5jr3m93B1dfX32toaJitNtSawP4FRCGfJV9lrUD8OFtglSq/pViliv0GWXY44L2QOz4AAAAASUVORK5CYII=',
err:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACy0lEQVRIS7XXSWsUQRgG4PfrHiOIJw9DLz/BqyKRmMgQcQnGuBACooLgQS96Ebx6EW/eBEVBCC6IMS6oEbeLCCKI4MU/UFUDOUgkCppMv1KhWzplz3RPkplb18zUU+9XS3eLMWYzyfMALkdR9A09/BhjtiZJcsbzvIuilPogIv0AftRqtaF6vf6lF7YxZmeSJDMish7AlBhjTpC8lWI9wR20JSKjYkGt9SkA13uBO+gigPEoiqaX4F7hSqldAJ6m5V0UkbEwDJ9Z7x+cw6+l7asqu0VFxCLrACxD/4NtgzHmeDrndlArwsvQQrgIF5HhMAw/VVntVdC2cAE+LyKNMtxBF0TkYDan7qCXzbH7pVP2jrgxZoTkdDqnCyRH4jh+1a5KHeGqyVP0EYAagFK0Y6nzI+2UfCVoZbhdcgB1kl0lzQKVljqfXCk1ISJ30n3+E4A9dyuXN99XV7D9o4OD5G8A+zstpKIF1jVsjDlC8n526lnY9/19QRC8rbLPV1TqFL0HwAfwC0CfLbXF7SETRdH7qnjlxEqpURF5mEN3k9zktlXFK8EpOlWUzq2C53mNIAg+liUvhbXWe+ytLUOL5tOZ93nP84bL8I6wRUk+FpE+kn9839/bbhFprY8CmEwXXSneFnZRETkQRdFMpxK6OMmhOI4/V95OzWaz0Wq1Xtik9iZu92kZmnWulDopIjfS5HMkG0X4f4lT9Hn2uELycBzHT8oWi3PCWfxm2jbned6OIAi+tj25tNYDJF+vBs06N8acJnnVXpP87vv+UB7PP+wNAHgJYAOAFslD3SYtuJ8vw0Vke/bSsAQ3m81tSZLYI28JFZGJMAwfdFPedr/NJwcwC2DQ4qK13gLgHYCNtioiMr5WaDYYrfU5AFfS61nf9/vtK8wb+zxlUQDHoii6vRZJ3T4cfMomHgRwgeRkHMd3e4Hmkp8FMEby0l8qK9qQ0A6pwwAAAABJRU5ErkJggg==',
tip:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABrUlEQVRIS+3WMUsDMRQA4PcKtlBQiu1J76UFpUgHVyd/gJs4iri4Cro4SxXBWdBFHARBHJxd/AUOrg4i0sVe2iMVcY69SCTDVSi9HDZdmuXg7iVfkktegjCmgmNyYQInmvkgCKqI2AAACQANIuomqhgLSjXVnPNnAFjS7Sil3hhjiyOHhRC+lJLHoVwuVy0Wiy0b3HrEnU5nLoqiMI7k8/nZQqHwOVJYKYXtdjuKIYqIMjaojrUesa7EOf8CgBmDdYnIcwU3AWDBLK5XxljdFfwEAMsGfmSMrbiCHwBg1cD3jLE1V/AtAGwa7JqItp3AQRCcI+KuwU6JaN8VfISIhwY7IKITV/AeIp4ZbIeILpzAnPMtALj5TQSIG77v3zmBwzCs9Xq9F41lMpl6uVzW+9qqpMpcWhBCkH56ntd3YCTVU8NJgUFxqWAhxLSUch0Ra1EUXTHG3m07kgr+cxFoEdE8IvZscGtY/1spZRBHstlspVQq9b0b1glrWCk1xTlvImLF5OoPIioj4vcwLP7dGjYrWl9/js0+vvR9X59WViUVbCUMCJ7A/zGLidr4AdwkmB8lttWIAAAAAElFTkSuQmCC'
},
toastTxtObj : {
right:'成功',
err:'失败',
tip:'提示'
},
/*
* icon 1成功 2失败 3 提示
* toastTxt 提示语
* time 关闭前的毫秒数 不传默认2000
*/
showToast: function(icon,toastTxt,time){
var iconSrc;
switch(parseInt(icon)){
case 1:
iconSrc = this.iconObj.right;
break;
case 2:
iconSrc = this.iconObj.err;
break;
case 3:
iconSrc = this.iconObj.tip;
break;
default:
iconSrc = this.iconObj.right;
break;
}
var toastTxt = toastTxt || this.toastTxtObj.right;
html = '<div class="toast-icon"><img src="'+iconSrc+'"></div><div class="toast-tip">'+toastTxt+'</div></div>';
toastBox = document.createElement('div');
toastBox.className = 'toast';
toastBox.id = 'toast';
toastBox.innerHTML = html;
document.body.appendChild(toastBox);
setTimeout(function(){
document.getElementById('toast').parentNode.removeChild(document.getElementById('toast'));
},time||2000)
},
loadCss:function(){
toastCss = document.createElement('link');
toastCss.rel = 'stylesheet';
toastCss.type = 'text/css';
toastCss.href = this.T() + 'toast.css';
document.head.appendChild(toastCss);
},
T:function() {
var b, a, f = window['document']['getElementsByTagName']("script");
for (var c = 0; c < f.length; c++) {
b = f[c].getAttribute("src") || "";
b = b.substr(0, b.toLowerCase().indexOf("toast.js"));
var a = b.lastIndexOf("/");
if (a > 0) {
b = b.substring(0, a + 1)
}
if (b) {
break;
}
}
return b
} }
var T = new toast();
T.init();

已上代码不用看,按下面操作来就行:

1.新建文件夹 如toast

2.新建css文件,命名toast.css,把上面的css复制到这个文件里

3.新建js文件,命名toast.js,把上面的js复制到这个文件里

好了,准备完毕,下面是用法:

一、       仅引入js 如:

<script src="../static/plugins/toast/toast.js"></script>

二、       具体用法如下:

/*

* T.showToast(icon,toastTxt,time);

* 三个参数

* icon 1成功   2失败  3 提示

* toastTxt 提示语

* time 关闭前的毫秒数 不传默认2000

* 示例如下:

*/

T.showToast(1,'我是提示语',2000);

原生JS封装 toast 弹层,自动关闭的更多相关文章

  1. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  2. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  3. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  6. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  7. 原生js封装十字参考线插件(一)

    需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

  8. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  9. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

随机推荐

  1. asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析

    下面我用一个实例来和大家分享一下我的经验,asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析. using Newtonsoft.Json; usin ...

  2. Binary Search 的递归与迭代实现及STL中的搜索相关内容

    与排序算法不同,搜索算法是比较统一的,常用的搜索除hash外仅有两种,包括不需要排序的线性搜索和需要排序的binary search. 首先介绍一下binary search,其原理很直接,不断地选取 ...

  3. lambda隐藏函数的嵌套

    # 隐藏函数嵌套 f = (lambda a,b :a if a>b else b)(1000, 2000008) print((lambda a,g:a if a > g else g) ...

  4. Python_struct模块操作二进制文件

    ''' 使用struct模块写入二进制文件 ''' import struct n=130000000 x=96.45 b=True s='a1@中国' sn=struct.pack('if?',n, ...

  5. Spring Boot使用RestTemplate消费REST服务的几个问题记录

    我们可以通过Spring Boot快速开发REST接口,同时也可能需要在实现接口的过程中,通过Spring Boot调用内外部REST接口完成业务逻辑. 在Spring Boot中,调用REST Ap ...

  6. 使用Iterator迭代器循环集合

    1.Iterator迭代器用于遍历集合元素,获取迭代器可以使用. 2.Iterator提供了统一遍历集合元素的 方式 ,其提供了用于遍历集合的连个方法----- boolean  hasNext()判 ...

  7. oracle数据库-错误编码大全

    ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件   ORA-00018: 超出最大会话数   ORA-00019: 超出最大会话许可数   ORA-000 ...

  8. mysql分表经验总结

    一.为什么要分表? 当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,有可能会死在那儿了.分表的目的就在于此,减小数据库的负担,缩短查询时间.根据个人经验,mysql执行一个s ...

  9. Ames房价预测特征工程

    最近学人工智能,讲到了Kaggle上的一个竞赛任务,Ames房价预测.本文将描述一下数据预处理和特征工程所进行的操作,具体代码Click Me. 原始数据集共有特征81个,数值型特征38个,非数值型特 ...

  10. 基于 WebRTC 创建一款多人联机游戏

    本项目的目标旨在尽可能少用服务器资源的前提下研发一款在线多人游戏,同时期望在一个用户的浏览器上运行游戏,同时让另一个玩家来连接.此外还希望程序尽可能简单以便于在博客中分析. 运用的技术 在我刚接触 P ...