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


Posted in Javascript onAugust 24, 2014

纯粹是为了打发时间,手写了一个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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
控制台报错object is not a function的解决方法
Aug 24 #Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 #Javascript
JavaScript验证电子邮箱的函数
Aug 22 #Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 #Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 #Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
You might like
详解PHP中的Traits
2015/07/29 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript中的依赖注入详解
2015/03/18 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
社区学习十八大感想
2014/01/22 职场文书
12月红领巾广播稿
2014/02/13 职场文书
新年爱情寄语
2014/04/08 职场文书
酒店管理求职信
2014/06/09 职场文书
单位委托函范文
2015/01/29 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
mysql优化
2021/04/06 MySQL