纯JS，仿安卓toast，ios警告框

最新推荐文章于 2022-05-10 09:34:14 发布

weixin_34194702

最新推荐文章于 2022-05-10 09:34:14 发布

阅读量197

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/180293/blog/1581019

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>纯JS，仿安卓toast，ios警告框</title>
<meta name="viewport" , content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body{background-color:#000}
</style>
</head>
<body></body>
<script language="javascript" type="text/javascript">
   //nativeTip('类原生的toast方法');
   nativeAlert('温馨提示', '类原生的警告框方法') //先设背景为黑色方便观察

   //类原生的toast方法
   function nativeTip(msg,duration) {
       duration=isNaN(duration)?3000:duration;
       var m = document.createElement('div');
       m.innerHTML = msg;
       m.style.cssText="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
       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 nativeAlert(title, msg) {
       var m = document.createElement('div');
       var html='<div style="position:fixed;top:25%;width:100%;max-width:640px;">'
           html+='<div style="width:80%;margin-left:10%;padding:2% 0 0;background:#fff;border-radius:8px;color:#000;">'
           html+='   <h3 style="font-size:1rem;text-align:center;">'+title+'</h3>'
           html+='   <p style="font-size:0.9rem;line-height:1.5rem;width:90%;margin:5% auto;text-align:center;">'+msg+'</p>'
           html+='   <div id="nativeAlert-btn" style="width:100%;height:2.6rem;line-height:2.6rem;border-top:1px solid #d4d4d4; color:#0383fe;text-align:center;">确定</div>'
           html+='</div>'
           html+='</div>'
       m.innerHTML = html;
       document.body.appendChild(m);
       document.getElementById("nativeAlert-btn").onclick =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);
       }
   }
</script>
</html>