写了一个迷你toast提示插件，支持自定义提示文字和显示时间
写了一个迷你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 ...
随机推荐
- 阿里云服务器安装https证书 centos + httpd + Symantec
一. 环境 centos7 阿里云服务器, httpd服务, 阿里云免费的Symantec证书 阿里云Symantec 有个免费版的证书, 具体怎么申请可以去百度解决 二. 网上大部分的经验贴都是要A ...
- Daily Scrum02 11.30
纵然编译大作业压顶,大家还是顶住压力,保证了软工项目的持续进行. Member Today's Task Tomorrow's Task 李孟 Task856 熟悉单元测试方法熟悉单元测试方法 Tas ...
- esayui combotree 只能选择子节点
esayui combotree 只能选择子节点用onBeforeSelect:参数是node,节点被选中之前触发,返回false取消选择动作. 网上找了好多都没一个可用的,要想知道他是子节点还是根节 ...
- 【转】 cocos2dx 3.x C++搭建protobuf环境
http://blog.csdn.net/ganpengjin1/article/details/50964961 Cocos2dx 里面在网络游戏通信这一块一般我们都会采用protobuf来进行通信 ...
- 【Linux】——搭建nexus
1.安装 前提条件: JDK已经安装,运行java -version查看. 将本地下载好的nexus存放到linux上,存放路径为 /usr/local/software.可使用winscp直接拷贝. ...
- 详细解析@Resource和@Autowired的区别 , 以及@Qualifier的作用
(41) (0) 首先 . @Resource是javax.annotation 包中的注解类 , 是jdk中封装的 . @AutoWired是spring的中注解,依赖于spring上下文. 相同 ...
- Flink History Job
history job的写入1. org.apache.flink.runtime.jobmanager,Object JobManagerrunJobManager中指定使用MemoryArchiv ...
- [Leetcode] Roman to integer 罗马数字转成整数
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
- 【BZOJ 1647】[Usaco2007 Open]Fliptile 翻格子游戏 模拟、搜索
第一步我们发现对于每一个格子,我们只有翻和不翻两种状态,我们发现一旦确定了第一行操作,那么第二行的操作也就随之确定了,因为第一行操作之后我们要想得到答案就得把第一行全部为0,那么第二行的每一个格子的操 ...
- 如何用setInterval调用类的方法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 se ...