html界面显示Toast

最新推荐文章于 2024-05-06 02:03:29 发布

xiejunna

最新推荐文章于 2024-05-06 02:03:29 发布

阅读量6.9k

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/xiejunna/article/details/78034209

版权

html 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

仿android显示toast

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Toast</title>

</head>

<body>
    <button onclick="clickme();">clickMeShowToast</button>  
</body>
<script>  

function showToast(msg,duration){  
    duration=isNaN(duration)?3000:duration;  
    var m = document.createElement('div');  
    m.innerHTML = msg;  
    m.style.cssText="width:60%; min-width:180px; background:#000; opacity:0.6; height:auto;min-height: 30px; color:#fff; line-height:30px; text-align:center; border-radius:4px; position:fixed; top:60%; left:20%; z-index:999999;";  
    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);  
}  

function clickme(){
    showToast("恭喜您！请求数据成功！请求数据成功！",3000);
}

</script>   
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiejunna

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html界面显示Toast

仿android显示toast<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
复制链接

扫一扫