首页  编辑  

网页上实现类似安卓的Toast功能提示

Tags: /计算机文档/网页制作/   Date Created:
函数如下:
function Toast(msg, duration) {
        duration = isNaN(duration) ? 5000 : duration;
        var m = document.createElement('div');
        m.innerHTML = msg.replaceAll("\n", "<br/>");
        m.style.cssText = "min-width: 150px;opacity: 0.9;height:auto;color: rgb(255, 255, 255);text-align: center;border-radius: 8px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999;background: rgb(0, 0, 0);font-size: 14px;padding: 20px 20px 20px 20px";
        document.body.appendChild(m);
        setTimeout(function () {
          var d = 0.5;
          m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
          m.style.opacity = '0';
          setTimeout(function () {
            document.body.removeChild(m)
          }, d * 1000);
        }, duration);
}
调用方法:
Toast("发送失败:<br/>" + "Blabla……", 5000);