用 JS 构造函数方法实现 toast
2019-02-18 本文已影响2人
肆意木
这就是一个简单的 toast 实现，禁不起推敲的那种。
我想要实现一个简单的 toast，不考虑异常处理，我希望不同的参数，它可以在页面不同的高度显示，完成后代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var Toast = function () {
}
Toast.prototype = {
create: function (message, time, top) {
var toastHtml = '<div class="tClass">' + message + '</div>';
if (document.querySelector('.tClass')) return;
document.body.insertAdjacentHTML('beforeend', toastHtml);
document.querySelector('.tClass').style.display = "block";
document.querySelector(".tClass").style.position = "fixed";
document.querySelector('.tClass').style.top = top+"%";
document.querySelector('.tClass').style.left = "50%";
setTimeout(function () {
if(document.querySelector('.tClass')){
document.querySelector('.tClass').parentNode.removeChild(document.querySelector('.tClass'))
}
},time);
},
creatToast:function (message,time,top) {
return this.create(message,time,top)
}
}
var toast = new Toast();
toast.creatToast("hello",1000,90) //在页面底端弹出
toast.creatToast("hello",1000,50) //在页面中间弹出
toast.creatToast("hello",1000,10) //在页面上方弹出
</script>
</body>
</html>
