这篇文章主要介绍 js 重写 alert 控件的过程比较适合学习 js 的新手朋友, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
纯粹是为了打发时间,手写了一个 JS 的 alert 控件。
代码如下:
- <html>
- <head>
- <script type="text/javascript">
- var alertObj = new Object();
- var generalStyle = {
- zIndex: 0,
- width: "200px",
- height: "100px",
- border: "thick solid #CCCCCC",
- background: "#FFFFFF",
- position: "absolute",
- top: "35%",
- left: "40%"
- }
- var txtStyle = {
- textAlign: "center"
- }
- var btnStyle = {
- position: "absolute",
- left: "40%",
- top: "70%",
- color: "#333333",
- fontWeight: "bold",
- outlineColor: "#3366FF",
- outlineStyle: "ridge",
- outlineWidth: "thin",
- //outline: "thin ridge #3366FF",
- innerHTML: "OK"
- }
- alertObj = {
- generalSet: generalStyle,
- txtSet: txtStyle,
- btnSet: btnStyle,
- isExist: false
- }
- alertObj.createComponent = function() {
- var component = document.createElement(arguments[0]);
- var styles = arguments[1];
- for (var property in styles) {
- if (styles[property] != null) {
- try {
- component.style[property] = styles[property];
- } catch(err) {
- document.write(err.name + ":" + property + "<br/>"); //set property error!
- }
- }
- }
- return component;
- }
- alertObj.show = function() {
- if (!this.isExist) {
- this.isExist = true;
- var bodyObj = document.body;
- bodyObj.style.zIndex = -1;
- bodyObj.style.background = "#999999";
- var divObj = this.createComponent("div", this.generalSet);
- var txtObj = this.createComponent("p", this.txtSet);
- txtObj.innerHTML = arguments[0];
- var btnObj = this.createComponent("button", this.btnSet);
- btnObj.innerHTML = this.btnSet.innerHTML;
- btnObj.onclick = function() {
- bodyObj.style.zIndex = 0;
- bodyObj.style.background = "";
- bodyObj.removeChild(divObj);
- if (alertObj.isExist) {
- alertObj.isExist = false;
- }
- }
- divObj.appendChild(txtObj);
- divObj.appendChild(btnObj);
- bodyObj.appendChild(divObj);
- }
- }
- function show(s) {
- alertObj.show(s);
- }
- </script>
- </head>
- <body>
- <p onclick="show('inner test');">
- Click show alert
- </p>
- </body>
- </html>
来源: