js 自定义吐司 toast 组件

最新推荐文章于 2024-05-06 02:03:29 发布
最新推荐文章于 2024-05-06 02:03:29 发布
阅读量2.1k 收藏 1
点赞数 7
分类专栏： JS HTML + CSS 文章标签： toast 自定义吐司 toast组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43052274/article/details/98028841
版权

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

       js实现自定义的一个吐司，很简单，直接上代码：

      一 、 首先写布局和样式

              html


<div class="toast_box">
     <p id="toast"></p>
</div>

             css

        
        .toast_box {
            width: 100%;
            position: absolute;
            bottom: 50px;
            justify-content: center;
            display: none;
        }

        .toast_box p {
            box-sizing: border-box;
            padding: 10px 20px;
            max-width: 72%;
            width: max-content;
            background: #000;
            color: #FFF;
            font-size: 16px;
            text-align: center;
            border-radius: 6px;
            opacity: 0.8;
        }

     二、封装吐司的方法


        function toast(text, time) {
            var toast = document.getElementById('toast');
            var toast_box = document.getElementsByClassName('toast_box')[0];
            toast.innerHTML = text;
            toast_box.style.display = 'flex';
            setTimeout(() => {
                toast_box.style.display = 'none';
            }, time)
        }

     三、最后直接在需要的地方调用这个方法就行了，例如：


toast('手机号码不能为空', 3000);

        自定义吐司已经完成，但只是单纯的显示和隐藏似乎是有些不太好看，用户体验会不太好，最终，柚子又加入了一些显示和隐藏的动画效果，会更好看一些，下面贴出所有代码：

        
        <body>
            <div class="toast_box">
                <p id="toast"></p>
            </div>
        </body>

        <style>
            @keyframes show {
                0% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes hide {
                0% {
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                }
            }

            .toast_box {
                width: 100%;
                position: absolute;
                bottom: 50px;
                justify-content: center;
                display: none;
            }

            .toast_box p {
                box-sizing: border-box;
                padding: 10px 20px;
                max-width: 72%;
                width: max-content;
                background: #000;
                color: #FFF;
                font-size: 16px;
                text-align: center;
                border-radius: 6px;
                opacity: 0.8;
            }
        </style>

        <script>
            function toast(text, time) {
                var toast = document.getElementById('toast');
                var toast_box = document.getElementsByClassName('toast_box')[0];
                toast.innerHTML = text;
                toast_box.style.animation = 'show 1.5s'
                toast_box.style.display = 'flex';
                setTimeout(() => {
                    toast_box.style.animation = 'hide 1.5s'
                    setTimeout(() => {
                        toast_box.style.display = 'none';
                    }, 1400)
                }, time)
            }
        </script>

    好了，就是这些了，希望能帮助到一些有需要的朋友！！！

 

@Grapefruit
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Toastjs一个JavaScript原型吐司消息
08-09
Toast.js：一个JavaScript原型吐司消息Toast messages
原生js自定义提示框
睡觉不打呼噜的博客
06-15 1678
原生js自定义提示框 本作者将文件命名为: showTips.js 在页面中引入 showTips.js 效果图如下： 描述一下： 原生的alert()弹框不太美观，又不想因为一个 提示框 引入其他的框架， 所以自己用原生js实现一个简单的 提示框 。 使用： 基本使用： showTips(); 有参数使用： var obj = { title:"提示框", //标题 可选 也是默认值 infoTips:"hi", //提示消息 可选 也是默认值 duration:800, //消失时间 可
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！(1)
最新发布
2401_84092423的博客
05-06 291
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JS Toast组件实现
xuyanquan的专栏
03-13 3456
Toast本来是一个比较简单的组件，但是由于与一般组件不同，脱离本身DOM结构，渲染到最外层。所以在Vue或者React之类的渲染模板写出来会非常绕和吃力，而且不易理解。最近自己更贴近于原生js实现Toast，代码简单又少，也可以随意更改，也不影响模块封装。 // Toast.js let ToastWrap = null let count = 0 function Toast...
吐司：js50吐司
02-27
敬酒 js50吐司
js-snackbar：一个简单的，免费的jQuery Snackbar（吐司）警报
02-16
js-snackbar 什么是小吃店？ 根据的介绍，小吃店或Toast在屏幕底部提供“有关应用程序流程的简短消息”。 通常，它们不应具有与之关联的图标，并且在大多数设备上只能是一行。 尽管此版本的Snackbar紧密遵循Material Design语义，但它以几种主要方式偏离。 您可以一次向用户发送多个小吃店，而不是一次发送一个小吃店。 小吃栏出现在右下角，而不是左下角或底部中心。 基本用法 只需调用Snackbar()即可创建具有默认选项的通知消息，或传递一个包含以下某些属性的options对象。 选项 要自定义Snackbar，请将函数传递给具有以下任何属性的JS对象。 所有属性都是可选的。 财产 类型 默认值 笔记 信息 string "Operation performed successfully." 可驳回的 boolean true 暂停 number或
微信小程序自定义toast超简单详细
02-07
在页面的js文件中，通过导入自定义的Toast组件，并调用其show和hide方法，即可在需要的时候显示和隐藏Toast。例如： ```javascript import CustomToast from '../components/custom-toast/custom-toast.js'; Page...
微信小程序Toast自定义组件
08-10
在需要使用 Toast 的页面中，引入并注册自定义组件，然后在页面的 JS 文件中通过组件提供的方法来显示和关闭 Toast。例如： ```javascript // 页面的 json 文件 { "usingComponents": { "xcx-toast": "/xcxToast/...
小程序自定义toast
10-20
1. `toast.js` - 自定义toast组件的JavaScript文件，定义组件的行为和逻辑，如显示、隐藏、设置显示时间和文字等。 2. `toast.wxml` - 组件的结构文件，定义了toast的布局和图标、文字的位置。 3. `toast.wxss` - ...
react-native-root-toast:React原生吐司之类的组件，纯javascript解决方案
05-22
Toast有很多自定义选项。 您可以通过调用api或在render内部使用Component来显示/隐藏Toast。 安装 npm install react-native-root-toast react-native-root-toast> = 2.1.0仅支持react-native> = 0.47.0，对于较...
一个用于本机的Toast组件，支持Android，IOS，Web，Windows-JavaScript开发
05-26
一个用于本机的Toast组件，支持Android，IOS，Web，Windows react-native-fast-toast一个用于本机的Toast组件，支持Android，IOS，Web，Windows功能正常，成功，危险和警告Toasts可自定义和图标支持平滑动画通过...
js-toast:一个小JavaScript库，显示吐司消息
05-08
JS-吐司 这是一个小JavaScript库，可产生敬酒消息。 吐司是很小的，不引人注意的通知，可以向用户发出警告。 该吐司从页面底部滑入，停留指定的时间，然后滑开。 这比在JavaScript中使用alert()函数友好得多。 我的上有个演示。 用法 用法非常简单，但也可以进行高级自定义。 对于初学者，单击按钮可以创建吐司 < input type =" button " value =" Toast! " onclick =" showAToast(); " > showAToast()函数创建并显示吐司的位置 function showAToast ( ) { iqwerty . toast . toast ( 'Hello!' ) ; } 这显示了具有默认设置的吐司。 如果您想关闭任何烤面包，请获取对任何烤面包的引用，然后调用.hide() 。 const toast
吐司工具类
wl1433289703的博客
11-08 617
集成步骤 dependencies { implementation 'com.hjq:toast:3.0' } 初始化Toast // 在Application中初始化 ToastUtils.init(this); 显示Toast  ToastUtils.show("我是吐司");  获取Toast对象 ToastUtils.getToast(); 设置Toa...
jquery 吐司_Toast(吐司)的基本使用
weixin_39648492的博客
12-20 1407
本节引言：好的，终于学习完Adapter类相关的一些控件，当然除了讲解的那几个，还有其他很多的相关的控件，就不慢慢讲解了~有需要的自行查阅文档，查看相关的用法，本节带来的是：Android用于提示信息的一个控件——Toast(吐司)！Toast是一种很方便的消息提示框,会在屏幕中显示一个消息提示框,没任何按钮,也不会获得焦点一段时间过后自动消失！非常常用！本节我们就来学习Toast的使用！1.直接...
javaScript、css实现toast
yuetingzhuying的专栏
02-22 8973
手机网页上时常要使用toast来弹出一下错误信息或提醒。开源上有一些很好的toast组件，例如jquery.toaster、toastr等等。但是他们的大小太大了，对于比较简单的页面，感觉有点得不偿失。
Android控件—Toast(吐司)
zksen的博客
03-16 1479
Toast 什么是Toast? Toast是Android系统提供的轻量级信息提醒机制，用于向用户提示即时信息，他显示在应用程序界面的最上层，显示一段时间后自动消失不会打断当前操作，也不获得焦点，非常常用 基本使用方法makeText() Toast.makeText(Context(),Text,Time).show(); Context():表示应用程序环境的信息，即当前组件的上下文环境。Context是一个抽象类，如果在Activity中使用Toast提示信息，那么该参数可设置为“当前Acti
一个简易的Toast封装
06-19 541
一个简易的Toast封装做开发，特别是移动端开发，适当的时候给用户一个合理的提示是非常重要的，这里，我使用了单例模式做了一个简单的Toast封装，其中提供了四种显示方式。这里就用大白话概述一下……1、有Toast就显示，覆盖在之前的Toast上面，默认 2、如果当前有Toast正在显示，对于新的Toast不做任何处理 3、只显示最新的Toast消息,如果之前有Toast正在显示,直接移除 4、
toast.js
pansuyong的博客
07-12 622
import Vue from "vue"; import Toast from "@/components/showDropTable"; //引入组件 let ToastConstract = Vue.extend(Toast); //扩展一个toast实例构造器 function toastShow() { let toastDom = new ToastConstract(); //new实例化一个对象 toastDom.$mount(document.createElement("div.
css3+原生js实现toast提示层弹框（淡入淡出动画效果）
codeTnt的博客
07-13 5159
今天无聊，写了一个小插件。利用css3封装了一个toast弹出层。代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;toast&lt;/title&gt;
uniapp自定义toast
05-03
要在uniapp中自定义toast，可以使用uni.showToast()方法。这个方法可以接受一个对象作为参数，你可以在这个对象中设置toast的样式、持续时间和内容。 下面是一个简单的例子： ```javascript uni.showToast({ title: '自定义toast', icon: 'none', duration: 2000, image: '/static/logo.png', mask: true }) ``` 其中，title表示toast的内容，icon表示图标类型（none表示不显示图标），duration表示持续时间，单位为毫秒，image表示自定义图标的路径，mask表示是否显示透明蒙层。你可以根据自己的需要来设置这些参数。 如果你想要更加自定义的toast，可以使用uni.createToast()方法。这个方法可以创建一个自定义的toast实例，你可以在这个实例中设置更多的样式和内容。 下面是一个使用uni.createToast()方法创建自定义toast的例子： ```javascript let customToast = uni.createToast({ duration: 2000, position: 'bottom', mask: false, image: '/static/logo.png' }) customToast.setData({ content: '这是一个自定义toast' }) customToast.show() ``` 在这个例子中，我们首先使用uni.createToast()方法创建了一个自定义toast实例。然后在这个实例中设置了duration、position、mask和image等参数。最后通过setData()方法设置了toast的内容，并通过show()方法显示出来。你可以根据自己的需要来设置这些参数和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Grapefruit

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值