原生js实现自定义alert风格和实现

2018年6月29 最新更新
添加函数节流，解决多次点击问题，添加单例模式，提高代码性能。
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <title>自定义alert</title>
  7   <style type="text/css">
  8   html,
  9   body {
 10     padding: 0;
 11     margin: 0;
 12   }
 13   /*     //防止鼠标双击选中文字
 14      */
 15 
 16   div {
 17 
 18     -khtml-user-select: none;
 19     /*早期浏览器*/
 20     user-select: none;
 21   }
 22   /*  //来自animated.css的样式 */
 23 
 24   .animated {
 25     animation-duration: 1s;
 26     animation-fill-mode: both;
 27   }
 28 
 29   @keyframes bounceInDown {
 30     from,
 31     60%,
 32     75%,
 33     90%,
 34     to {
 35       animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 36     }
 37 
 38     0% {
 39       opacity: 0;
 40       transform: translate3d(0, -3000px, 0);
 41     }
 42 
 43     60% {
 44       opacity: 1;
 45       transform: translate3d(0, 25px, 0);
 46     }
 47 
 48     75% {
 49       transform: translate3d(0, -10px, 0);
 50     }
 51 
 52     90% {
 53       transform: translate3d(0, 5px, 0);
 54     }
 55 
 56     to {
 57       transform: none;
 58       display: none;
 59     }
 60   }
 61 
 62   .bounceInDown {
 63     animation-name: bounceInDown;
 64   }
 65 
 66   </style>
 67 </head>
 68 
 69 <body>
 70   <button onclick="test" id="btn">点我测试</button>
 71   <script type="text/javascript">
 72   (function(win, doc) {
 73     var firstTime = true,
 74       startTime = 0;
 75 
 76     function alert(txt, autoTime, top) {
 77       //工具函数
 78       function $(dom) {
 79         return document.querySelector(dom);
 80       }
 81       //单利模式核心
 82       var getSingle = function(fn) {
 83         var result;
 84         return function() {
 85           return (result || (result = fn.apply(this, arguments)));
 86         }
 87       }
 88 
 89       //函数节流
 90       var throttle = function(fn, interval) {
 91         var __self = fn; // 保存需要被延迟执行的函数引用// 是否是第一次调用
 92         return function() {
 93           var args = arguments,
 94             __me = this;
 95           if (firstTime) { // 如果是第一次调用，不需延迟执行
 96             __self.apply(__me, args);
 97             return firstTime = false;
 98           }
 99 
100           var endTime = new Date() * 1; //时间大于3000秒下次执行
101           if (endTime - startTime > (autoTime || 3000)) {
102             __self.apply(__me, args);
103           }
104         };
105       };
106 
107 
108       //创建div代码
109       var createDiv = function() {
110 
111         var div = doc.createElement("div");
112         div.style.backgroundColor = " #22b9ff";
113         div.style.color = " #fff";
114         div.style.position = " fixed";
115         div.style.zIndex = 9999999;
116         div.style.height = " 60px";
117         div.style.top = top || "10%";
118         div.style.left = "50%";
119         div.style.lineHeight = " 60px";
120         div.style.borderRadius = " 4px";
121         div.style.fontSize = " 20px";
122         div.style.textAlign = "center";
123         div.style.padding = "0 10px";
124         div.className = "animated  bounceInDown";
125         div.id = "alert";
126         div.innerHTML = txt || "不能为空！";
127         return div;
128       }
129 
130       var createSingleDiv = getSingle(createDiv);
131 
132       return throttle(function() {
133 
134         var div = createSingleDiv(); //创建div
135         startTime = new Date() * 1; //初始位置
136         $("body").appendChild(div);
137         //动态调整位置
138         var alertWidth = win.getComputedStyle($("#alert"), null).width;
139         div.style.marginLeft = -parseInt(alertWidth) / 2 + "px";
140         setTimeout(function() {
141           $("body").removeChild(div);
142         }, autoTime || 3000);
143       }).apply(this, null);
144     }
145 
146     win.alert = alert; //导出
147 
148   })(window, document);
149 
150 
151   document.getElementById('btn').onclick = function() {
152     alert("手机号不能为空！");
153   }
154 
155   </script>
156 </body>
157 
158 </html>
View Code