写了一个迷你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提示插件，支持自定义提示文字和显示时间的更多相关文章
-
写了一个迷你confirm弹窗插件，有取消和确认操作处理并支持单个确认使用弹窗和锁屏禁止滚动
由于项目想精简不想用其他第三方的ui插件,又很需要像confirm等小效果来完善交互,且使用的频率也是相当的高,于是自己造了一个,省时也省力 代码已经粘贴出来,直接复制即可看到效果,高手勿喷,可以相互 ...
-
写了一个 gorm 乐观锁插件
前言 最近在用 Go 写业务的时碰到了并发更新数据的场景,由于该业务并发度不高,只是为了防止出现并发时数据异常. 所以自然就想到了乐观锁的解决方案. 实现 乐观锁的实现比较简单,相信大部分有数据库使用 ...
-
自己写的一个jQuery轮播插件
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...
-
自己写的一个jQuery对联广告插件
效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...
-
自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
-
[browser navigator 之plugins] 写了一个检测游览器插件
检测IE插件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return fal ...
-
旋转toast 自定义toast方向，支持多个方向的显示，自定义View
package com.example.canvasdemo; import java.security.InvalidAlgorithmParameterException; import andr ...
-
Echarts修改提示框及自定义提示框内容
1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...
-
001.Delphi插件之QPlugins，一个最简单的插件
安装QPlugins里面的Demo,复制粘贴着写了一个最简单的插件,看看好不好用 EXE代码如下: unit Main_Frm; interface uses Winapi.Windows, Wina ...
随机推荐
-
asp.net 301重定向代码
/// <summary> ///重定向代码 /// </summary> /// <param name="sender"></para ...
-
java中myeclipse连接mysql问题（java.lang.ClassNotFoundException: com.mysql.jdbc.Driver）
java中myeclipse连接mysql问题(java.lang.ClassNotFoundException: com.mysql.jdbc.Driver) 1.往项目中添加mysql-conne ...
-
浅谈Java泛型之<;? extends T>;和<;? super T>;的区别
关于Java泛型,这里我不想总结它是什么,这个百度一下一大堆解释,各种java的书籍中也有明确的定义,只要稍微看一下就能很快清楚.从泛型的英文名字Generic type也能看出,Generic普通. ...
-
win7 64位 mongodb2.6.0 安装服务启动
Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...
-
笔记本键盘上没有break键的解决方案
django在Windows上调试需要用ctrl+break终止服务器……笔记本键盘上没有break好尴尬…… 在百度搜了很多都没有找到,最后终于在谷歌上找到了英文版的解决方案. starting o ...
-
I.MX6 隐藏电池图标
/********************************************************************** * I.MX6 隐藏电池图标 * 声明: * 有些时候设 ...
-
【OC加强】NSDate的使用方法——日期时间在实际开发中比較有用
(1)日期的最主要知识点就是日期转换成字符串格式化输出,相反就是依照某个格式把字符串转换成日期. (2)一般关于时区的设置非常少用到,仅仅要了解就可以. #import <Foundation/ ...
-
BOM物料清单在输入用料计划时快捷选择物料没有带出单位
问题: 在新增BOM物料清单时,输入用料计划,快捷选择物料没有带出单位,但是从清单查找里面选择物料,是可以自动带出单位的. 原因分析查找: 1.这是个自定义单据,到tools工具上查看相关设置,看清单 ...
-
4K视频在线看，网速跟不上怎么办？
灿烂的阳光,温柔的风,二狗子一打开窗,觉得春天到了. “天气这么好,宅家玩电脑.”二狗子说着,点开了爱奇怪 App,最近一期的版本更新提到了支持 4K 视频播放,这是二狗子等了好久的功能. “今天我就 ...
-
C# 替换Word文本—— 用文档、图片、表格替换文本
编辑文档时,对一些需要修改的字符或段落可以通过查找替换的方式,快速地更改.在C# 在word中查找及替换文本一文中,主要介绍了在Word中以文本替换文本的方法,在本篇文章中,将介绍如何用一篇Word文 ...