以下是封装的代码
/**
* 用原生 JS 封装一个 Toast 组件
*/
var Toast = {
// 隐藏的 setTimeOut 引用
hideTimeOut: null,
/**
* 初始化
*/
init: function () {
var toastNode = document.createElement(‘section’);
toastNode.innerHTML = ‘<i class=”iconfont icon-success”></i><i class=”iconfont icon-error”></i><span class=”text”>111</span>’;
toastNode.id = ‘toastWaka’; // 设置 id，一个页面有且仅有一个 Toast
toastNode.setAttribute(‘class’, ‘toast’); // 设置类名
toastNode.style.display = ‘none’; // 设置隐藏
document.body.appendChild(toastNode);
},
/**
* 显示 Toast
* @param text 文本内容
* @param type 类型 success error
* @param duration 持续时间
*/
show: function (text, type, duration) {
// 确保上一次的 TimeOut 已被清空
if (this.hideTimeOut) {
clearTimeout(this.hideTimeOut);
this.hideTimeOut = null;
// console.error(‘ 上一次的 TimeOut 还未走完!’);
// return;
}
if (!text) {
console.error(‘text 不能为空!’);
return;
}
var domToastWaka = document.getElementById(‘toastWaka’);
console.log(‘domToastWaka’, domToastWaka);
if (!domToastWaka) {
console.error(‘toastWaka DOM 不存在!’);
return;
}
var domIconSuccess = domToastWaka.querySelector(‘.icon-success’); // 成功图标
var domIconError = domToastWaka.querySelector(‘.icon-error’); // 错误图标
var domToastText = domToastWaka.querySelector(‘.text’); // 文字
domToastText.innerHTML = text || ”;
switch (type) {
case ‘success’:
domIconSuccess.style.display = ‘inline-block’;
domIconError.style.display = ‘none’;
break;
case ‘error’:
domIconSuccess.style.display = ‘none’;
domIconError.style.display = ‘inline-block’;
break;
default:
domIconSuccess.style.display = ‘none’;
domIconError.style.display = ‘none’;
break;
}
domToastWaka.style.display = ‘block’;
// 不传的话默认 2s
var that = this;
this.hideTimeOut = setTimeout(function () {
domToastWaka.style.display = ‘none’;
that.hideTimeOut = null; // 置 TimeOut 引用为空
}, duration || 2000);
},
/**
* 隐藏 Toast
*/
hide: function () {
// 如果 TimeOut 存在
if (this.hideTimeOut) {
// 清空 TimeOut 引用
clearTimeout(this.hideTimeOut);
this.hideTimeOut = null;
}
var domToastWaka = document.getElementById(‘toastWaka’);
if (domToastWaka) {
domToastWaka.style.display = ‘none’;
document.body.removeChild(domToastWaka);
}
}
};
css 样式设置
/*toast 样式 */
#toastWaka {
position: absolute;
display: none;
left: 50%;
bottom: 50%;
z-index: 99999;
margin: 0 auto;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 120px;
height:40px;
line-height: 40px;
border-radius: 5px;
text-align: center;
color: #fff;
background-color: rgba(000,000,000,0.5);
}
#toastWaka .text{
color: #fff;
display: inline-block;
font-size: 14px;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
如何使用
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>toast</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>
<meta name=”description” content=”” />
<style>
/*toast 样式 */
#toastWaka {
position: absolute;
display: none;
left: 50%;
bottom: 50%;
z-index: 99999;
margin: 0 auto;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 120px;
height:40px;
line-height: 40px;
border-radius: 5px;
text-align: center;
color: #fff;
background-color: rgba(000,000,000,0.5);
}
#toastWaka .text{
color: #fff;
display: inline-block;
font-size: 14px;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
</head>
<body>
<section id=”redbag”>
<button class=”downbtn” onclick=”icCopy()”> 复制邀请码 </button>
</section>
<!–<script src=”http://browser.umeweb.com/v6/ume/js/common/jquery.js”></script>–>
<script src=”./toast.js”></script>
<script type=”text/javascript”>
function icCopy() {
try {
// Now that we’ve selected the anchor text, execute the copy command
var msg = ‘ 邀请码已复制 ’ ;
var type = ‘success’;
Toast.init();
Toast.show(msg, type, null);
setTimeout(function () {
Toast.hide();
}, 20000);
} catch (err) {
Toast.init();
Toast.show(‘Oops, unable to copy’, ‘error’, null);
setTimeout(function () {
Toast.hide();
}, 20000);
}
}
</script>
</body>
</html>