写了一个迷你toast提示插件，支持自定义提示文字和显示时间，不想用其他第三方的ui插件，又想要toast等小效果来完善交互的同学可以试试，

代码中还贡献了一段css能力检测js工具函数，做项目的时候可以考虑把这个插件 和 上一篇迷你confirm弹窗插件一起集成到自已写的Base/tool/Library中

代码已经粘贴出来，直接复制即可看到效果，高手勿喷，可以相互交流下（⊙⊙）

（hmtl js css已经集成到一起无需其他文件，不依赖jquery zepto等库）

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

</head>

<body>

<button id="button">click</button>

<script type="text/javascript">

    window.onload = function () {

        function prefixStyle(style) {

            var elementStyle = document.createElement('div').style

            var sty = style.charAt(0).toUpperCase() + style.substr(1)

            var vendor = (function () {

                var transformNames = {

                    webkit: 'webkit' + sty,

                    Moz: 'Moz' + sty,

                    O: 'O' + sty,

                    ms: 'ms' + sty,

                    standard: style

                }

                for (var key in transformNames) {

                    if (elementStyle[transformNames[key]] !== undefined) {

                        return key

                    }

                }

                return false

            })()

            if (vendor === false) return false

            if (vendor === 'standard') return style

            return vendor + sty

        }

        var toast = (function () {

            function Toast() {

                this.timer = 0;

                this.dom = document.createElement("div");

                this.style = document.createElement("style");

                this.dom.id = 'javascriptToastPop'

                this.dom.style.display = 'none'

                this.dom.innerText = ''

                this.style.innerHTML = '#javascriptToastPop{z-index:999999;position:fixed;display:none;top:50%;left:50%;min-width:3em;padding:.35em;border-radius:5%;-webkit-border-radius:5%;-ms-border-radius:5%;-moz-border-radius:5%;-o-border-radius:5%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);font-size:.8em;text-align:center;opacity:0;background:rgba(0,0,0,.3);color:#fff;line-height:1.5em;-webkit-transition:opacity 1000ms ease-out;-moz-transition:opacity 1000ms ease-out;-ms-transition:opacity 1000ms ease-out;-o-transition:opacity 1000ms ease-out;transition:opacity 1000ms ease-out}'

                this.init()

            }

            Toast.prototype.init = function () {

                document.head.appendChild(this.style);

                document.body.appendChild(this.dom);

            };

            Toast.prototype.event = function (text, speed) {

                var that = this

                this.speed = speed ? speed : 2000

                //this.element = document.querySelector(el);

                this.dom.innerText = text

                //this.element.addEventListener('click',function(){

                that.dom.style.display = 'block'

                clearInterval(that.timer);

                that.timer = setTimeout(function () {

                    that.timer = null;

                    that.method();

                }, 20)

                //},false);

            }

            Toast.prototype.method = function () {

                var that = this

                this.dom.style.opacity = 1;

                clearInterval(that.timer);

                this.timer = setTimeout(function () {

                    that.timer = null;

                    that.dom.style.opacity = 0;

                    var transition = prefixStyle('transition')

                    that.dom.addEventListener(transition + "End", function () {

                        that.dom.style.display = 'none'

                        console.log("动画结束");

                        that.dom.removeEventListener(transition + 'End', arguments.callee, false);//销毁事件

                    })

                }, that.speed);

            }

            return new Toast();

        })();

        //toast.event('#button','好的good',2000)

        toast.event('good good', 3000)

    }

</script>

</body>

</html>

　　

觉得有帮助的同学，可以支持作者，谢谢！！
　支付宝：         微信：

写了一个迷你toast提示插件，支持自定义提示文字和显示时间的更多相关文章

  1. 写了一个迷你confirm弹窗插件，有取消和确认操作处理并支持单个确认使用弹窗和锁屏禁止滚动

    由于项目想精简不想用其他第三方的ui插件,又很需要像confirm等小效果来完善交互,且使用的频率也是相当的高,于是自己造了一个,省时也省力 代码已经粘贴出来,直接复制即可看到效果,高手勿喷,可以相互 ...

  2. 写了一个 gorm 乐观锁插件

    前言 最近在用 Go 写业务的时碰到了并发更新数据的场景,由于该业务并发度不高,只是为了防止出现并发时数据异常. 所以自然就想到了乐观锁的解决方案. 实现 乐观锁的实现比较简单,相信大部分有数据库使用 ...

  3. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

  4. 自己写的一个jQuery对联广告插件

    效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...

  5. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  6. [browser navigator 之plugins] 写了一个检测游览器插件

    检测IE插件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return fal ...

  7. 旋转toast 自定义toast方向，支持多个方向的显示，自定义View

    package com.example.canvasdemo; import java.security.InvalidAlgorithmParameterException; import andr ...

  8. Echarts修改提示框及自定义提示框内容

    1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...

  9. 001.Delphi插件之QPlugins，一个最简单的插件

    安装QPlugins里面的Demo,复制粘贴着写了一个最简单的插件,看看好不好用 EXE代码如下: unit Main_Frm; interface uses Winapi.Windows, Wina ...

随机推荐

  1. Ext.Net中如何获取组件

    我们在编写函数function的时候,常常需要用到页面上的组件.这时候就需要调用组件. 在Ext.net中,调用组件可以用.App.ID.(ID指的是想要调用的组件的ID). 例如: 我写一个函数需要 ...

  2. [转] UnityVS(Visual Studio Tools For Unity)的安装与使用

    一些废话 Unity 的开发者们,尤其是微软系的Unity开发者们,用Mono是不是烦死了?你是不是跟我一样,用vs来写代码,用Mono来跟踪调试?好麻烦啊好麻烦. 也许你会说,傻逼你不会用Unity ...

  3. java线程（6）——线程池（下）

    上篇博客java线程(5)--线程池(上)介绍了线程池的基本知识,这篇博客我们介绍一下常用的ThreadPoolExecutor. 定义 类图关系: ThreadPoolExecutor继承了Abst ...

  4. js 给某个div增加class 样式（三种方式）

    第一种:      el.setAttribute('class','abc'); <!DOCTYPE HTML> <HTML> <HEAD> <meta c ...

  5. Xcode & swift

    swift-apps swift 2018 apps Xcode Swift Playground https://developer.apple.com/download/ https://deve ...

  6. 并发(二)CyclicBarrier

    CyclicBarrier 循环屏障,用于一组固定数目的线程互相等待.使用场景如下: 主任务有一组串行的执行节点,每个节点之间有一批任务,固定数量的线程执行这些任务,执行完成后,在节点完成集合后,再继 ...

  7. 【bzoj1018】[SHOI2008]堵塞的交通traffic 线段树区间合并+STL-set

    题目描述 给出一张2*n的网格图,初始每条边都是不连通的.多次改变一条边的连通性或询问两个点是否连通. 输入 第一行只有一个整数C,表示网格的列数.接下来若干行,每行为一条交通信息,以单独的一行“Ex ...

  8. 【bzoj2768/bzoj1934】[JLOI2010]冠军调查/[Shoi2007]Vote 善意的投票 最小割

    bzoj2768 题目描述 一年一度的欧洲足球冠军联赛已经进入了淘汰赛阶段.随着卫冕冠军巴萨罗那的淘汰,英超劲旅切尔西成为了头号热门.新浪体育最近在吉林教育学院进行了一次大规模的调查,调查的内容就是关 ...

  9. hdu 3172 Virtual Friends (并查集)

    Virtual Friends Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. DataBase -- JOIN

    SQL JOIN:用于根据两个或多个表中列的关系,从这些表中查数据. (为了得到完整数据,我们需要从两个或多个表中获取结果.) 例如W3School中列出的实例,使用如下语句: select Pers ...