html界面显示Toast

来源：互联网发布：炒美股用什么软件编辑：程序博客网时间：2024/06/05 06:15

仿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>

阅读全文

0 0