js重写alert控件(适合学习js的新手朋友)

更新时间：2014年08月24日 09:19:36 投稿：whsnow

这篇文章主要介绍js重写alert控件的过程比较适合学习js的新手朋友,需要的朋友可以参考下

纯粹是为了打发时间，手写了一个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>

您可能感兴趣的文章:

重写
alert

JavaScript函数参数使用带参数名的方式赋值传入的方法
这篇文章主要介绍了JavaScript函数参数使用带参数名的方式赋值传入的方法,实例分析了javascript函数传递参数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
javascript基本算法汇总
这篇文章主要为大家详细介绍了javascript基本算法，包括输出奇偶数控制算法、冒泡排序等，感兴趣的小伙伴们可以参考一下
2016-03-03
Javascript的promise,async和await的区别详解
这篇文章主要为大家详细介绍了Javascript的promise,async和await的区别，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
一文详解e2e测试之cypress的使用
这篇文章主要介绍了e2e测试之cypress的使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
原生js实现轮播图
这篇文章主要为大家详细介绍了原生js实现轮播图的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
js监听输入框值的即时变化onpropertychange、oninput
很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。
2011-07-07
浏览器兼容console对象的简要解决方案分享
不同浏览器或者版本之间对于console对象的支持不尽相同，而console方法在开发调试过程中都是不错的工具。难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么。其实可以变通解决
2013-10-10
javascript(js)的小数点乘法除法问题详解
本篇文章主要是对javascript(js)中的小数点乘法除法问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JS target与currentTarget区别说明
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
2011-08-08
微信小程序实现的canvas合成图片功能示例
这篇文章主要介绍了微信小程序实现的canvas合成图片功能,结合实例形式分析了微信小程序canvas合成图片相关组件使用、操作步骤与注意事项,需要的朋友可以参考下
2019-05-05