写了一个迷你toast提示插件，支持自定义提示文字和显示时间

最新推荐文章于 2020-12-10 15:48:26 发布

转载最新推荐文章于 2020-12-10 15:48:26 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MrZouJian/p/7607250.html

本文介绍了一个自制的Toast提示插件，支持自定义提示文字和显示时间，无需依赖第三方UI库。该插件还包括一段CSS能力检测JS工具函数，便于集成到个人项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了一个迷你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>

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

转载于:https://www.cnblogs.com/MrZouJian/p/7607250.html