自己手动写一个js 的toast提示框

最新推荐文章于 2024-05-13 09:57:54 发布
最新推荐文章于 2024-05-13 09:57:54 发布
阅读量5.4k 收藏 7
点赞数 6
分类专栏： javascript demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39644462/article/details/82998308
版权

闲来无聊，就尝试着自己写一个toast,因为之前写网页是一直会用到的，所以就自己造了个轮子，也当作学习记录（有不好的地方请多多指教），下面贴代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' /> 
	<title>demo</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.yg-toast{
			position: fixed;
			background: rgba(0,0,0,.7);
			border-radius: 4px;
			top: 90%;
			left: 50%;
			transform: translate(-50%,-50%);
			max-width: 60%;
			text-align: center;
			transition: all .1s;
		}
		.yg-toast-text{
			color: #fff;
			padding: 4px 10px;
		    padding-bottom: 6px;
		}
	</style>
</head>
<body>
</body>
<script type="text/javascript">
	//立即执行函数
	(function(window , undefined ){ 
		var Ygtoast = function(){ //构造函数大驼峰命名法
		};
		Ygtoast.prototype={  //prototype 属性使您有能力向对象添加属性和方法。
			create: function(str,duration) {
				let self = this;
				var toastHtml = '';
				var toastText = '<div class="yg-toast-text">'+str+'</div>';
				toastHtml = '<div class="yg-toast">'+toastText+'</div>';
				if(document.querySelector(".yg-toast"))return;    //当还没hide时禁止重复点击
				document.body.insertAdjacentHTML('beforeend', toastHtml);
				duration == null ? duration=2000 : '';  //如果toast没有加上时间，默认2000毫秒；
	            self.show();
	            setTimeout(function(){
                    self.hide();
                }, duration);
			},
			show:function(){
				let self = this;
	            document.querySelector(".yg-toast").style.display = "block";
	            document.querySelector(".yg-toast").style.marginTop =  "-"+Math.round(document.querySelector(".yg-toast").offsetHeight/2)+"px";
	            if(document.querySelector(".yg-toast"))return;
			},
			hide:function(){
				var self = this;
	            if(document.querySelector(".yg-toast")){
	                document.querySelector(".yg-toast").parentNode.removeChild(document.querySelector(".yg-toast"));
	            }
			},
			toast:function(str,duration){
				var self = this;
				return self.create(str,duration);
			}
		};
		window.Ygtoast = Ygtoast;
	}(window));

	// 以上是造轮子

	// 调用
	var yg = new Ygtoast();
	yg.toast("你说神马",1500);
</script>
</html>

代码可以直接复制使用

攻城狮YanGo
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！
编程界明世隐的博客
12-21 3137
目录 闲言 效果图： 语法 参数说明： 完整代码 欢迎交流指导！！ 闲言 周末花时间写了一个消息提示框，因之前项目里面用到的提示框有好几种，没有统一起来，这次就抽时间搞一个。 大概试了一下感觉还不错，蛮好用的，就拿出来分享，目前还没有用到项目中，可能会有些不适合的场景到时候就再修正吧。 效果图： 图1 图2： 图3: 图4： 语法 textToast(msg,option); 参数说明： msg：需要展示的内容。 option：可选对象，包含...
js 简单弹框toast
weixin_30784141的博客
11-14 142
新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="max-wi...
强大的 jQuery Toast 插件
最新发布
gitblog_00089的博客
05-13 351
强大的 jQuery Toast 插件 项目地址:https://gitcode.com/kamranahmedse/jquery-toast-plugin 这个开源的 jQuery Toast 插件是一种优雅的方式来向用户展示高度自定义的通知信息。简单易用，却能实现丰富的功能和美观的样式设计，为你的网页交互增色不少。 如何使用 安装非常简单，你可以通过 Bower 或者 npm 来获取： # ...
Toastjs一个JavaScript原型吐司消息
08-09
Toast.js：一个JavaScript原型吐司消息Toast messages
js 自定义吐司 toast 组件
@Grapefruit的博客
08-01 2111
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) js实现自定义的一个吐司，很简单，直接上代码： 一 、 首先写布局和样式 html <div class="toast_box"> <p id="toast"></p&gt...
toast.js
pansuyong的博客
07-12 620
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.
JQuery信息提示框插件 jquery.toast.js 的使用
08-18
`jQuery.toast.js` 是一个基于 jQuery 的轻量级信息提示框插件，它提供了一种优雅的方式，用于在网页上显示各种类型的通知、提示信息或者错误消息。这个插件的设计目标是简洁易用，同时具有高度可定制性，能够适应...
jQuery网页顶部消息提示框插件
06-24
4. **创建消息**：通过插件提供的方法创建不同类型的消息，例如`$.toast.success('操作成功')`创建一个成功消息。 5. **自定义样式和行为**：根据项目需求，可以通过修改CSS样式或扩展插件的配置选项来自定义消息框...
系统提示框.rar
05-21
例如，一个名为`toast`的类可能表示提示框，而`success`、`error`等类可以区分不同类型的提示信息。 2. **CSS样式设计**：虽然“纯HTML+JS”不涉及CSS库，但实现提示框的外观和布局仍需要CSS。开发者可能通过内联...
微信小程序消息提示框demo
04-08
在这个"微信小程序消息提示框demo"中，我们将探讨如何在微信小程序中使用消息提示框，即`toast`组件。 消息提示框在用户交互中起到至关重要的作用，它能向用户展示短暂、非阻塞的信息，如操作成功、错误提示等。在...
Vue组件教程之Toast(Vue.extend 方式)详解
01-19
这类提示框组件我们通常都会直接在 JS 代码中进行调用。像下面这样： this.$toast('别点啦，到头啦！') 但看到网上大多数还是通过 component 方式实现的，这样的话我们在使用的时候还要在 DOM 中放置一个组件元素，...
jquery toast信息提示工具
05-19
这是本人写的一个jquery模仿安卓的toast信息提示工具插件，使用简单，方便，兼容目前主流浏览器，里面有一个demo.html文件，教你怎样使用本工具。
C# 实现像toast的提示
08-24
C# 实现像android toast的提示。不想做修改的话，直接调用就能使用，如想做的更加个性化，可自行修改。 var toast = new Toast("标题", "提示内容", 2（保持时间）, 0x0（动画效果), 0x0); toast.Show();
Appium+python自动化（二十六）- Toast提示（超详解）简介
NHB456789的博客
07-27 1508
Android中的Toast是一种简易的消息提示框。当视图显示给用户，在应用程序中显示为浮动。和Dialog不一样的是，它永远不会获得焦点，无法被点击。Toast类的思想就是尽可能不引人注意，同时还向用户显示信息，希望他们看到。而且Toast显示的时间有限，一般3秒左右就消失了。因此使用传统的元素定位工具，我们是无法定位到Toast元素的（传说中低调奢华有内涵）。
简易消息提示框Toast和通知的使用
孤云博客
06-06 2911
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) Android中的Toast是一种简易的消息提示框。和Dialog不一样的是，Toast是没有焦点的，toast提示框不能被用户点击，而且Toast显示的时间有限，toast会根据用户设置的显示时间后自动消失。 ...
Android Toast提示的使用
今晚看星星的博客
04-17 3650
文章目录1 Android的三种提示2 Toast提示2.1 Toast 提示特点2.2 主要函数3 一个案例 1 Android的三种提示 2 Toast提示 Toast（消息提示框）是轻量级信息提醒机制，显示在应用程序界面的最上层 一般用于提示一些丌那么引人注目，但是又希望用户看见的消息，无需用户自己维护它的消失 2.1 Toast 提示特点 没有对应的控件 没有控制按钮 不会获得焦点 自动消失 用于显示快速提示信息 2.2 主要函数 方法 public static Toast makeT
Android 基础知识4-2.3常用控件提示（Toast）
yyxhzdm的博客
12-05 1407
Toast是Android提供的“快显讯息”类，Toast类的使用非常简单，而且用途很多。比如，当退出应用程序时，可以用它来提示用户“需要更新”，或者当在输入框中输入文本时，可以提示用户“最多可以输入20个字符”等。使用Toast提示信息的实例代码:Toast.makeText(Context,Text,Time),show();1.默认提示：Toast.makeText(MainActivity.this,"请求消息失败！",Toast.LENGTH_SHORT).show(
Android移动开发-Android屏幕手写签名的实现
热门推荐
_彼岸雨敲窗_的博客
11-07 1万+
Android屏幕手写签名的原理就是把手机屏幕当作画板，把用户手指当作画笔，手指在屏幕上在屏幕上划来划去，屏幕就会显示手指的移动轨迹，就像画笔在画板上写字一样。实现手写签名需要结合绘图的路径工具Path，在有按下动作时调用Path对象的moveTo方法，将路径起始点移动到触摸点；在有移动操作时调用Path对象的quadTo方法，将记录本次触摸点与上次触摸点之间的路径；在有移动操作与提起动作时调用Ca
javaScript、css实现toast
yuetingzhuying的专栏
02-22 8960
手机网页上时常要使用toast来弹出一下错误信息或提醒。开源上有一些很好的toast组件，例如jquery.toaster、toastr等等。但是他们的大小太大了，对于比较简单的页面，感觉有点得不偿失。
写一个弹Toast的方法
05-17
在Android平台上，弹出Toast的方法如下： ```java public void showToast(Context context, String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } ``` 在使用时，只需要传入一个Context对象和要显示的消息即可： ```java showToast(MainActivity.this, "Hello, world!"); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值