网页中android Toast效果的实现

左手的ㄟ右手 2022-06-18 10:44 207阅读 0赞

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

【转载请注明出处：[http://blog.csdn.net/zjbpku/article/details/7747655][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 />

经过360浏览器、谷歌浏览器、UC、IE、Microsoft Edge、QQ浏览器、火狐浏览器测试可用。

[Link 1]: http://lib.csdn.net/base/softwaretest
[http_blog.csdn.net_zjbpku_article_details_7747655]: http://blog.csdn.net/zjbpku/article/details/7747655