网页中android Toast效果的实现

最新推荐文章于 2021-06-27 03:02:07 发布

Jabin.

最新推荐文章于 2021-06-27 03:02:07 发布

阅读量4.4k

点赞数

分类专栏： web 文章标签： android function transition opera chrome border

本文链接：https://blog.csdn.net/zjbpku/article/details/7747655

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将以下代码拷贝到html文件中即可测试

【转载请注明出处：http://blog.csdn.net/zjbpku/article/details/7747655】

<html>
<head>
<style type="text/css" >
#toast
{
position: fixed;
top: 200px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;

-webkit-transition: opacity 0.5s ease-out ;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;

}
</style>

<script type="text/javascript">
var intervalCounter = 0;
function hideToast()
{
var alert = document.getElementById("toast");
alert.style.opacity = 0;
clearInterval(intervalCounter);
}
function drawToast(message)
{
var alert = document.getElementById("toast");
if (alert == null)
{
var toastHTML = '<div id="toast">' + message + '</div>';
document.body.insertAdjacentHTML('beforeEnd', toastHTML);
}
else
{
alert.style.opacity = .9;
}
intervalCounter = setInterval("hideToast()", 1000);
}
function save()
{
drawToast("Toast······");
}
</script>
</head>
<body>
<button οnclick="save()">Toast</button>
<p>Toast</p>
<body>

</html>

<hr />

向博主发送邮件

Jabin.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页中android Toast效果的实现

将以下代码拷贝到html文件中即可测试【转载请注明出处：http://blog.csdn.net/zjbpku/article/details/7747655】#toast{ position: fixed; top: 200px; left: 50%; width: 200px; margin-left: -100px;
复制链接

扫一扫