脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js重写alert控件

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>
您可能感兴趣的文章:

相关文章

  • JavaScript改变this指向的四种方法(bind、call、apply 和箭头函数)

    JavaScript改变this指向的四种方法(bind、call、apply 和箭头函数)

    JavaScript中的this是一个非常重要且容易困惑的概念,主要用于引用执行上下文,然而,this的指向经常因为不同的执行环境而改变,为了解决这个问题,JavaScript提供了多种方法来明确指定this的指向,本文将详细介绍JavaScript中常用的四种改变this指向的方法
    2025-03-03
  • JS中递归函数

    JS中递归函数

    编程语言中，函数Func(Type a,……)直接或间接调用函数本身，则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下
    2016-06-06
  • js获取url参数代码实例分享(JS操作URL)

    js获取url参数代码实例分享(JS操作URL)

    这篇文章主要介绍了js分析url获取url参数，可以获取?前面部分、#及后面部分，大家看代码吧
    2013-12-12
  • JavaScript获取URL汇总

    JavaScript获取URL汇总

    在WEB开发中，许多开发者都比较喜欢使用javascript来获取当前url网址，本文就此为大家总结一下比较常用获取URL的javascript实现代码
    2015-06-06
  • 微信小程序获取手机网络状态的方法【附源码下载】

    微信小程序获取手机网络状态的方法【附源码下载】

    这篇文章主要介绍了微信小程序获取手机网络状态的方法,涉及微信小程序wx.getNetworkType函数检查网络连接状态的相关使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • JavaScript中for-in和for-of的不同之处及如何正确使用

    JavaScript中for-in和for-of的不同之处及如何正确使用

    这篇文章主要给大家介绍了关于JavaScript中for-in和for-of的不同之处及如何正确使用它们的相关资料,无论是for...in还是for...of语句都是迭代一些东西,它们之间的主要区别在于它们的迭代方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • javascript 模式设计之工厂模式详细说明

    javascript 模式设计之工厂模式详细说明

    2010-05-05
  • TypeScript接口interface的高级用法详解

    TypeScript接口interface的高级用法详解

    interface 是typescript核心内容,用来定义规范,无论是函数,数组或者对象,还是类都可以用接口interface来进行规范,而接口本身也是可以继承和扩展的,本文给大家详细介绍了TypeScript interface的高级用法,需要的朋友可以参考下
    2025-03-03
  • javascript addLoadEvent函数说明

    javascript addLoadEvent函数说明

    网页加载完整后会触发一个onload事件，默认地一个事件只能和一个函数绑定。
    2010-01-01
  • 微信小程序实现星级评价

    微信小程序实现星级评价

    这篇文章主要为大家详细介绍了微信小程序实现星级评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论