h5替换 alert toast ajax 请求 独立函数封装 复制可用
不想用框架的朋友可以用 精简到极致
//替换系统的 信息框提示function msgShow(o){if(typeof o === "string") o={msg:o};var divc = document.createElement("div");divc.innerHTML = o.title;o.title = divc.innerHTML;divc.innerHTML = o.msg;o.msg = divc.innerHTML;var arr = 'msg,title'.split(',');for (var k in arr) if( o[arr[k]] == "undefined")o[arr[k]]='';if(typeof o.fun !== "function")o.fun=function(){};var html_doc = `<div class="end_overflow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;background-color: rgba(0,0,0,0.5);overscroll-behavior: none;text-align: center;font-size: 16px;overflow-y: auto;"><div class="end_overflow" style="position: absolute;width: calc(100vw);top:0;left: 0;height: calc(100vh + 1px);z-index: -1;"></div><div style="max-width: 300px;min-width: 150px;width: 50%;border-radius: 10px;background-color: #FFF;/* padding: 10px 0; */margin: 0 auto;margin-top: 30%;"><div style="padding: 10px 10px 0px 10px;width: 100%;font-size: 1.3rem; font-weight: 200;"><span >${o.title}</span></div><div style="padding: 10px 10px 10px 10px;width: 100%;"><span >${o.msg}</span></div><div style="width: 100%;height: 1px; background-color: rgba(0,0,0,0.2);margin: 10px 0 0 0;"></div><div style="color: dodgerblue; font-size: 1.3rem; padding: 10px 10px;width: 100%;pointer-events: auto;" onclick=";var aac=this.parentNode.parentNode.fun; this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);aac();"><span>ok</span></div></div></div>`;console.log(html_doc)divc.innerHTML = html_doc;divc.firstChild.fun=o.fun;document.body.appendChild(divc.firstChild)};//模仿安卓的 toastfunction toastShow(o) {if(typeof o === "string") o={'msg':o};var divc = document.createElement("div");if(typeof o.time == "undefined") o.time =3000;//消失时间 毫秒if(typeof o.s == "undefined") o.s =0.5;//过度动画 时间秒var arr = 'msg'.split(',');for (var k in arr){if( typeof o[arr[k]] == "undefined"){o[arr[k]] ='';}else{divc.innerHTML = o[arr[k]];o[arr[k]] = divc.innerHTML;}} if(typeof o.fun !== "function")o.fun=function(){};var html_doc = `<div class="end_overflow" style="position: fixed;top:70%;left: 0;z-index: 999999999;text-align: center;font-size: 16px;width: 100%;color: #fff;opacity:0;transition: opacity ${o.s}s;"><div style="margin: 0 auto;background-color: rgba(0,0,0,0.75);width: 50%;border-radius: 5px;padding: 8px;">${o.msg}</div></div>`;divc.innerHTML = html_doc;divc.firstChild.fun=o.fun;divc = document.body.appendChild(divc.firstChild);console.log(divc);setTimeout(function (){divc.style.opacity=1;}, 2);setTimeout(function () {setTimeout(function (){document.body.removeChild(divc);},o.s*1000);divc.style.opacity=0;}, o.time-(o.s*1000));}document.querySelector("form").onsubmit=function () {var data = new FormData(this);var url = this.getAttribute('action');//GET请求ajax(url,function (data) {msgShow(data);})//POST请求例子ajax({'url':url,'type':'POST','data':data,//data-form 格式提交 JSON自己转换一下},function (data) {msgShow(data);})
}function ajax(o,fun) {if(typeof o === "string") o={'url':o};if(typeof o.fun !== "undefined") fun=o.fun;if(typeof fun == "undefined") o.fun=function(){};if(typeof o.type == "undefined") o.type="GET";if(typeof o.data == "undefined") o.data="";if(typeof o.url == "undefined") o.url="";var s=new XMLHttpRequest();s.onreadystatechange=function () {if(s.readyState === XMLHttpRequest.DONE) {fun(s.responseText)if (s.status !== 200) { // 错误处理//msgShow(lg[lg_code]+' : 500');return;}}};s.open(o.type,o.url,true);s.send(o.data);
}